React: TypeError cannot read properties of undefined (reading 'push')

Question

I am trying to create an app with a login functionality. The way I want it to work is that once the login is verified, the program would automatically redirect the user towards the homepage. Right now I have this code:

App.js:

function App() {
  
  return (
    <React.Fragment>
      <div className="content">
       <BrowserRouter> 
        <Routes>
          <Route element={<LoginForm />} path="/login" />
          <Route path="/test" element={<BasicExample />} />
        </Routes>
        </BrowserRouter>
      </div>
    </React.Fragment>
  );
}

export default App;

Login

class LoginForm extends FForm {
  // create a ref object
  state = {
    data: { username: "", password: "" },
    errors: {},
  };

  handleSubmit = event => {
    event.preventDefault();
    const { email, password } = this.state;
    // console.log(this.state);
    console.log('logging')
    axios
      .post(
        "http://127.0.0.1:8000/auth/",
        {
          username: email,
          password: password
        }
        // { withCredentials: true }
      )
      .then(res => {
        console.log('got it')
        console.log(res);
        window.localStorage.setItem("token", res.data.token);
        
        
       
        
        console.log('pushing')
        this.props.history.push('/test', { state: "sample data" })
        // return <Redirect to="/home" />;
      })
      .catch(err => {
        console.log('NOOOOO eror')
        console.log(err);
      });
  } 

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <h1>welcome to log in!</h1>
          <br />
          <input
            type="text"
            name="email"
            placeholder="Username"
            defaultValue={this.state.email}
            onChange={e => {
              this.setState({ email: e.target.value });
            }}
          />
          <br />
          <br />
          <input
            type="password"
            name="password"
            placeholder="Password"
            defaultValue={this.state.password}
            onChange={e => {
              this.setState({ password: e.target.value });
            }}
          />
          <br />
          <br />
          <button type="submit"> Login </button>
        </form>
      </div>
    );
  } 
}

export default LoginForm;

The code outputs TypeError: cannot read properties of undefined (reading 'push'). I assume that the history was not initialized. Where/how should I initialize the history?

Adam Jenkins · Accepted Answer · 2022-09-27 13:23:37Z

2

For react-router 6 continue to use element, but use a HOC

Ok, react-router 6 changed the way they do things to only use element, but you have to pass props yourself, and if you're using a class based component then you need to use a HOC)

const LoginComponentWithHistory = (props) => <LoginForm {...props} history={useHistory()}/>

// route

<Route element={<LoginFormWithHistory/>} path="/login" />

See related interesting github convo: https://github.com/remix-run/react-router/issues/8146

For react-router 5

This needs to be passed as component

<Route component={LoginForm} path="/login" />

When you pass it as component, react-router passes in all the props for you (including history)

edited Sep 27, 2022 at 13:23

answered Sep 27, 2022 at 11:57

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Orl13 Over a year ago

I tried passing it as component and got matched leaf root does not have an element

Adam Jenkins Over a year ago

@Razvan updated for react-router 6

Orl13 Over a year ago

version for react-6 works, but now it gives error when trying to execute line this.props.history.push('/test', { state: "sample data" }) from handleSubmit. How can i fix that in v6?

Adam Jenkins Over a year ago

@Razvan what's the error? Same one? Cannot read push of undefined?

Orl13 Over a year ago

Invalid hook call. I made a post about it as well stackoverflow.com/questions/73854940/…

|

nightElf · Accepted Answer · 2022-09-27 13:37:27Z

0

Try exporting LoginForm with HOC from React Router

export default withRouter(LoginForm);

answered Sep 27, 2022 at 13:37

nightElf

5222 silver badges4 bronze badges

Collectives™ on Stack Overflow

React: TypeError cannot read properties of undefined (reading 'push')

2 Answers 2

For react-router 6 continue to use element, but use a HOC

For react-router 5

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

For react-router 6 continue to use element, but use a HOC

For react-router 5

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related