无法在react中读取未定义的属性'push'

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

我在控制台中无法读取未定义的属性“ push”。现在如何在react-router v4中访问推送。

提前致谢！

Answer 1

如果您使用的是反应路由器，则需要包装您的组件withRouter以将历史道具注入到您的组件中。

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

...

export default withRouter(MyComponent);

此外，您使用的任何组件都必须是顶层路由器组件的子级。

Answer 2

默认情况下，不能像在React Router 3中那样使用在React Router 4中使用browserHistory，但是仍然可以使用不同的方式通过withRouter或上下文推送，但是我建议使用withRouter HOC。您应该使用withRouter高阶组件，并将其包装到将推送到历史记录的组件中。例如：

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