Cannot read property 'push' of undefined in react

Question

    import React, {PropTypes} from 'react';

export default class Login extends React.Component {
  constructor(props) {
    super(props)
    this.handleLogin = this.handleLogin.bind(this)
  }

  handleLogin(event) {
    event.preventDefault()
    // do some login logic here, and if successful:
    this.props.history.push(`/Home`)
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleLogin}>
          <input type='submit' value='Login' />
        </form>
      </div>
    )
  }
}

I am getting Cannot read property 'push' of undefined in the console. Now how to access the push in the react-router v4.

thanks in advance!

score 8 · Answer 1 · answered Sep 20 '18 at 10:00

By default use can't use browserHistory in react router 4 as you can use in react router 3, still you can use different ways to push by withRouter or context but i will recommend use withRouter HOC. You should use the withRouter high order component, and wrap that to the component that will push to history. For example:

import React from "react";
import { withRouter } from "react-router-dom";

class MyComponent extends React.Component {
  ...
  myFunction() {
    this.props.history.push("/HOME");
  }
  ...
}
export default withRouter(MyComponent);

when i use the above code , im getting the folowing error :You should not use or withRouter() outside a — Mukilan Balu, Sep 20 '18 at 12:32

score 6 · Answer 2 · answered Sep 20 '18 at 09:56

6

If you're using react router you need to wrap your component withRouter to have the history prop injected into your component.

import {withRouter} from 'react-router-dom';

...

export default withRouter(MyComponent);

Also whatever components you use this must be children of your router component at the top level.

answered Sep 20 '18 at 09:56

Adam

1,724
13
16

when i use the above code , im getting the folowing error :You should not use or withRouter() outside a – Mukilan Balu Sep 20 '18 at 12:33
This is related to my last comment. You need to make sure your parent components are wrapped in a `` component at the top level, using it outside of this scope won't work as it's this component that injects the history prop into your component. – Adam Sep 20 '18 at 12:57
import React from 'react'; import {BrowserRouter as Router, Route} from 'react-router-dom'; // import { hashHistory } from 'react-router'; import Login from './Login'; export default class App extends React.Component { render() { return (

) } } this is my app.js, it this ok ? – Mukilan Balu Sep 20 '18 at 14:19

score 3 · Answer 3 · answered Sep 20 '18 at 09:59

Looks like your component is not wrapped with router. wrap it with withRouter.

import React, { PropTypes } from "react";
import { withRouter } from "react-router-dom";

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.handleLogin = this.handleLogin.bind(this);
  }

  handleLogin(event) {
    event.preventDefault();
    // do some login logic here, and if successful:
    this.props.history.push(`/Home`);
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleLogin}>
          <input type="submit" value="Login" />
        </form>
      </div>
    );
  }
}
export default withRouter(Login);

when i use the above code , im getting the folowing error :You should not use or withRouter() outside a — Mukilan Balu, Sep 20 '18 at 12:17

Arash Yazdani · Answer 4 · 2022-02-18T15:30:25.400

You have to use useNavigate if you installed v6 or more than "react-router-dom": ^6.2.1

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

 let navigate = useNavigate();


 const onSubmit = async (e) => {
    e.preventDefault();
    await axios.post("http://localhost:3001/users", user);
    navigate(`/`);
 };

Please read this link if you want know more about it and this video has a very useful practice to understand it. The video page is 'React Router V6 Tutorial - Routes, Redirecting, UseNavigate, UseParams...' in 'PedroTech' page on YouTube.

score 0 · Answer 5 · answered Sep 20 '18 at 12:19

0

Wrap your component withRouter to have the history prop so you can use push

answered Sep 20 '18 at 12:19

Sultan Aslam

5,600
2
38
44

score 0 · Answer 6 · answered Sep 20 '18 at 12:25

Here are the requirements that should make it work:

required imports for index.js:

import { Provider } from 'react-redux';
import { createHashHistory } from 'history';
import { ConnectedRouter, connectRouter, routerMiddleware } from 'connected-react-router';

in your main App.js you need:

const history = createHashHistory();
ReactDOM.render(
        <Provider store={store}>
            <ConnectedRouter history={history}>
                <App />
            </ConnectedRouter>
        </Provider>,
        rootEl,
    );

There where you want to use push:

import { push as RouterPush } from 'react-router-redux';

Cannot read property 'push' of undefined in react

6 Answers6

Linked