this.context.router.pushが動作していません

Question

私はreact router 4.0 versionを使用しています。ボタンをクリックすると、あるコンポーネントから別のコンポーネントにナビゲートしようとしています。私はこのためにルーティングを実装しました。 実装した後、ナビゲートボタンをクリックすると「Uncaught TypeError：this.context.router.pushは関数ではありません」という警告メッセージが表示され、警告が表示される 「無効なコンテキストタイプ：のコンテキストrouterが無効です。EmpLoginfunction。試してみましたが、うまく動作しませんでした。以下は私のコンポーネントとルーティングの実装です。以前私は反応ルータ2.0を使用していたし、browserhistory.pushが動作していた。

この試してみてください：また

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

あなたが試すことができます -

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

エラーからは、それはオブジェクトとしてrouterを探しているようですpush()の代わりにtransitionToとabovあなたの代わりに反応し、ルータからbrowserHistoryを使用する必要があります電子方法

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

Answer 2

...

browserHistory.push('/EmpDetails'); 

Answer 3

正しい方法反応し、ルータv4のコンテキストを使用してナビゲートする：

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

新をthis.context.routerにアクセスすると、反応ルータv4がpushメソッドの位置を変更しました。 routerは現在プロパティとしてhistoryとrouteを持ち、historyの範囲内にあり、割り当てられたメソッドが見つかります。また

、最新のを使用している場合は、バージョン15.5.0を反応させ、propTypesは別々のパッケージに削除されているとあなたがそれらを得ることができます。

npm install prop-types --save 

または

yarn add prop-types 

これは、文書化のために書かれています。他のユーザーからの回答では問題は解決されていませんでしたが、この問題が発生したため、将来の開発者の便宜のために記入することにしました。