Cannot read property 'push' of undefined in react - reactjs

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!

Answer 1

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

Answer 2

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.

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

Answer 4

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.

Answer 5

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

Answer 6

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