私はreact router 4.0 versionを使用しています。ボタンをクリックすると、あるコンポーネントから別のコンポーネントにナビゲートしようとしています。私はこのためにルーティングを実装しました。 実装した後、ナビゲートボタンをクリックすると「Uncaught TypeError:this.context.router.pushは関数ではありません」という警告メッセージが表示され、警告が表示される 「無効なコンテキストタイプ:のコンテキストrouter
が無効です。EmpLogin
function
。試してみましたが、うまく動作しませんでした。以下は私のコンポーネントとルーティングの実装です。以前私は反応ルータ2.0を使用していたし、browserhistory.pushが動作していた。this.context.router.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'));
contextTypeをPropTypes.objectに変更しようとしましたか? – FakeRainBrigand
はい、私はそれを試みましたが運がありません。 – user2768132