Cannot read property 'push' of undefined in react

问题

    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!

回答1:

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.

回答2:

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

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

回答4:

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

回答5:

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

来源：https://stackoverflow.com/questions/52422332/cannot-read-property-push-of-undefined-in-react

标签

reactjs

react-router