reactjs - this.context.router.push 不起作用

Question

我使用的是react router 4.0版本。我试图通过单击按钮从一个组件导航到另一个组件。我已经为此实现了 react 路由。实现后，当我单击导航按钮时，它会给出错误“Uncaught TypeError:this.context.router.push 不是函数”和警告“上下文类型失败:提供给 EmpLogin 的 object 类型的上下文 router 无效，预期的 function。”尝试了很多但无法使其发挥作用。下面是我的组件和路由实现。早些时候我使用的是 React router 2.0 并且 browserhistory.push 正在工作。

export class EmpLogin extends React.Component {
  constructor(props) {
super(props);
this.state = {

};
}

loginID(e) {
this.setState({loginID: e.target.value});
}

 Password(e) {
this.setState({password: e.target.value});
}

 navigate(e){
    e.preventDefault();
    this.context.router.push('/EmpDetails');
  }

render() {
  return (
    <div>
    <div >
      <form>
        <input type="text" onChange={this.loginID.bind(this)} />
        <input type="password" onChange={this.Password.bind(this)} />  
        <div>
            {this.props.children}
            <button onClick={this.navigate.bind(this)}>feature</button>
        </div>
      </form>
    </div>
  </div>
);
 }
 }

  EmpLogin.contextTypes = {
  router: React.PropTypes.func.isRequired
 }

 export default EmpLogin;

路由实现 -

import React from 'react';
import ReactDOM from 'react-dom';
import EmpLogin from './EmpLogin';
import {Router, Route,HashRouter} from 'react-router-dom';
import {browserHistory,hashHistory} from 'react-router';
import EmpDetails from './EmpDetails';

ReactDOM.render((
 <HashRouter>
 <div>
  <Route exact path='/' component={EmpLogin}/>
  <Route path='/Emplogin' component={EmpLogin}/>
  <Route path='/EmpDetails' component={EmpDetails} />
  </div>
  </HashRouter>
 ), document.getElementById('root'));

Answer 1

在react-router v4中使用上下文进行导航的正确方法:

this.context.router.history.push('/EmpDetails')

新的react-router v4更改了访问this.context.router时push方法的位置。 router 现在具有 history 和 route 作为属性，并且您可以在 history 中找到分配的方法。

此外，如果您使用的是最新的 React 版本 15.5.0，propTypes 已被删除到单独的包中，您可以通过以下方式获取它们:

npm install prop-types --save

或

yarn add prop-types

这是出于文档原因而编写的。其他用户的回答并没有成功解决问题，由于我有这个问题，所以我决定将其填写以方便将来的开发者。