3

    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!

6 Answers 6

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);
1
  • 1
    when i use the above code , im getting the folowing error :You should not use <Route> or withRouter() outside a <Router> Sep 20, 2018 at 12:32
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.

3
  • when i use the above code , im getting the folowing error :You should not use <Route> or withRouter() outside a <Router> Sep 20, 2018 at 12:33
  • 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.
    – Adam
    Sep 20, 2018 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 ( <div> <Router> <div> <Route exact path='/Login' component={Login} /> </div> </Router> <Login /> </div> ) } } this is my app.js, it this ok ? Sep 20, 2018 at 14:19
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);
1
  • when i use the above code , im getting the folowing error :You should not use <Route> or withRouter() outside a <Router> Sep 20, 2018 at 12:17
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.

0
0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.