c'.contexte.routeur.push ne fonctionne pas
Je suis à l'aide de réagir routeur version 4.0. Je suis en train de naviguer à partir d'un composant à l'autre d'un clic sur le bouton. J'ai mis en œuvre réagir de routage pour cela.
Après la mise en œuvre lorsque je clique sur le bouton naviguer il me donne l'erreur "Uncaught TypeError: ce.contexte.routeur.push n'est pas une fonction" et un avertissement
"Echec du type de contexte: contexte non Valide router
de type object
fourni à EmpLogin
, devrait function
." Essayé beaucoup de choses, mais ne pouvait pas le faire fonctionner. ci-dessous sont mes composant de routage et de mise en œuvre. Plus tôt, j'ai été en utilisant réagir routeur 2.0 et browserhistory.pousser a travailler.
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;
De routage mise en œuvre -
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'));
- Avez-vous essayer de changer de contextType à PropTypes.l'objet?
- oui j'ai essayé, mais pas de chance.
Vous devez vous connecter pour publier un commentaire.
La bonne façon de naviguer à l'aide du contexte dans réagissent-routeur v4:
La nouvelle réagir-routeur v4 a changé le lieu de la
push
méthode lors de l'accès àthis.context.router
.router
a maintenanthistory
etroute
comme propriétés, et il est à l'intérieur dehistory
que vous trouverez la répartition de la méthode.Aussi, si vous utilisez la dernière version réagir 15.5.0, propTypes ont été enlevés dans un paquet séparé et vous pouvez les obtenir avec:
ou
Ce qui est écrit pour la documentation des raisons. D'autres utilisateurs de réponses n'a pas réussi à résoudre le problème, et comme j'ai eu ce problème j'ai décidé de le remplir pour la commodité des futurs développeurs.
De l'erreur, il semble qu'il est à la recherche d'
router
comme un objet:Essayez ceci:
Vous pouvez également essayer
transitionTo
au lieu depush()
avec la méthode ci-dessusrouter.push({pathname:"/",data:{data:this.state.auth }});
comment retrive les données transmises dans le nouveau redirigé composantvous devez utiliser browserHistory de réagir-routeur à la place...
J'ai mélangé à vos réponses. Et puis j'ai réussi à réagir 16.5.2!
Installer prop-types
Importation PropTypes dans mon NavMenu.js
Ensemble contextTypes
Enfin utiliser cette.contexte.routeur.l'histoire.pousser