reactjs - 无法读取 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>
    )
  }
}

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

提前致谢!

Answer 1

默认情况下，不能在 react 路由器 4 中使用 browserHistory，因为您可以在 react 路由器 3 中使用，但您仍然可以使用不同的方式通过 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);