this.context.router.push不起作用

Question

我正在使用react router 4.0版本.我想在按钮点击时从一个组件导航到另一个组件.我为此实现了反应路由.实现当我点击导航按钮后它给我的错误"遗漏的类型错误:this.context.router.push不是一个函数",并警告"失败上下文类型:无效的上下文router类型的object供给EmpLogin,预计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 push在访问时改变了方法的位置this.context.router.router现在有history和route作为属性history,你可以找到分配的方法.

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

npm install prop-types --save

要么

yarn add prop-types

这是出于文档原因编写的.其他用户的答案没有成功解决问题,因为我有这个问题,我决定填写它以方便未来的开发人员.

Answer 2

从错误来看，它似乎正在寻找router一个对象：

尝试这个：

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

您也可以尝试transitionTo代替push()上面的方法

this.context.router.transitionTo('/EmpDetails');