Error using history.push Reactjs

Question

I need to redirect to the root '/' I’m trying to use the history.push('/');, but when I click to send I get an error

"Typeerror: Cannot read Property 'push' of Undefined"

Detailed:

Code:

import React, { useState } from 'react';
import { 
    Row, 
    Col, 
    TextInput, 
    Textarea, 
    Button, 
    Icon 
} from 'react-materialize';

import CardEmpresas from './CardEmpresas';

export default function NovaEmpresa({ history }) {
  const [nomeEmpresa, setNomeEmpresa] = useState('')
  const [endereco, setEndereco] = useState('')
  const [descricao, setDescricao] = useState('')

  function handleSubmit(event) {
    event.preventDefault();
    console.log({nome: nomeEmpresa, endereco, descricao});
    history.push('/');
  }



  return (
    <Row>
      <Col s={6}>
        <h3>Nova Empresa</h3>
        <form className="col s12" onSubmit={handleSubmit}>
          <Col s={12} >
            <TextInput
              s={12}
              type="text"
              value={nomeEmpresa}
              label="Nome da Empresa"
              onChange={event => setNomeEmpresa(event.target.value)}
            />
          </Col>

          <Col s={12} >
            <TextInput
              s={12}
              type="text"
              value={endereco}
              label="Endereço da Empresa"
              onChange={event => setEndereco(event.target.value)}
            />
          </Col>

          <Col s={12} >
            <Textarea
              s={12}
              type="text"
              value={descricao}
              label="Descrição da Empresa"
              onChange={event => setDescricao(event.target.value)}
            />
          </Col>

          <Button type="submit" waves="light">
            Submit
            <Icon right>
              send
            </Icon>
          </Button>

        </form>
      </Col>
      <Col s={6}>
        <CardEmpresas
          s={12}
          title={nomeEmpresa}
          descricao={descricao}
          endereco={endereco}
        />
      </Col>

    </Row>
  )
}

Answer 1

Solution used: I imported the useHistory in the React-router-dom and created a constant "history" passing by "useHistory();", and it worked.

    import { useHistory } from "react-router-dom";

    export default function NovaEmpresa(props) {
      const history = useHistory();

then I could use the function to redirect to the desired page

history.push('/');

It would be nice to see other possible solutions

Answer 2

You can set a function and call it on a button as below

onHomePress = () => {
    const { history } = this.props;
    history.push("/");
};

render() {

const { history } = this.props;

return (

<Container>

<Button
   onClick={() => this.onHomePress()}
/>
   {'Continuar'}
</Button>

</Container>
);

};

Answer 3

Hello,

Looking at your code, it is clearer that you have not yet made the import of useHistory hook. You can make the following additions to your code to then use the hook:

1. Import the library Hook 'React-router-dom':

   import {useHistory} from 'React-router-dom'

2. declare a constant history calling, assigning the function you just imported:

   const history = useHistory()

3. And finally you can use it to make your redirect:

   history.push('/pathname')

Of course, in these three steps I assumed that you installed the library of the gift router React, using Yarn or npm. If you didn’t, install it from the NPM or YARN package manager using the command: npm install 'React-router-dom', or Yarn add 'React-router-dom'. Right after the installation, you need to make more Mports, this time in the index.js of the app React.