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!

shyam agarwal · Accepted Answer · 2018-09-20 10:00:51Z

8

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);

answered Sep 20, 2018 at 10:00

shyam agarwal

2291 silver badge6 bronze badges

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

1 Comment

Mukilan Balu Over a year ago

when i use the above code , im getting the folowing error :You should not use <Route> or withRouter() outside a <Router>

Adam · Accepted Answer · 2018-09-20 09:56:24Z

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, 2018 at 9:56

Adam

1,7541 gold badge13 silver badges16 bronze badges

3 Comments

Mukilan Balu Over a year ago

when i use the above code , im getting the folowing error :You should not use <Route> or withRouter() outside a <Router>

Adam Over a year ago

This is related to my last comment. You need to make sure your parent components are wrapped in a <Router> 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.

Mukilan Balu Over a year ago

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 ( <div> <Router> <div> <Route exact path='/Login' component={Login} /> </div> </Router> <Login /> </div> ) } } this is my app.js, it this ok ?

Amruth · Accepted Answer · 2018-09-20 09:59:07Z

3

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);

answered Sep 20, 2018 at 9:59

Amruth

5,9122 gold badges30 silver badges41 bronze badges

1 Comment

Mukilan Balu Over a year ago

when i use the above code , im getting the folowing error :You should not use <Route> or withRouter() outside a <Router>

Arash Yazdani · Accepted Answer · 2022-02-18 15:30:25Z

2

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.

edited Feb 18, 2022 at 15:30

answered Feb 12, 2022 at 20:14

Arash Yazdani

3102 silver badges14 bronze badges

Comments

Sultan Aslam · Accepted Answer · 2018-09-20 12:19:39Z

0

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

answered Sep 20, 2018 at 12:19

Sultan Aslam

6,2882 gold badges42 silver badges49 bronze badges

Comments

Stephan Hovius · Accepted Answer · 2018-09-20 12:25:58Z

0

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';

answered Sep 20, 2018 at 12:25

Stephan Hovius

3911 silver badge6 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'push' of undefined in react

6 Answers 6

1 Comment

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related