Comment puis-je passer l'État à travers le routeur React?
voici le fichier qui me pose problème:
var Routers = React.createClass({
getInitialState: function(){
return{
userName: "",
relatives: []
}
},
userLoggedIn: function(userName, relatives){
this.setState({
userName: userName,
relatives: relatives,
})
},
render: function() {
return (
<Router history={browserHistory}>
<Route path="/" userLoggedIn={this.userLoggedIn} component={LogIn}/>
<Route path="feed" relatives={this.state.relatives} userName={this.state.userName} component={Feed}/>
</Router>
);
}
});
je suis en train de passer le nouveau this.state.relatives
et this.state.userName
à travers les routes dans mon "nourrir"-composant. Mais je reçois ce message d'erreur:
Avertissement: [réagir-routeur] Vous ne pouvez pas changer, il sera ignoré
je sais pourquoi cela se produit, mais je ne sais pas comment autrement je suis censé passer les États à mon composant "feed". J'essaie de régler ce problème depuis 5 heures. et í suis tout à fait désespérée!
s'il vous Plaît aider! Merci
SOLUTION:
les réponses ci-dessous ont été utiles et je remercie les athors, mais ce n'était pas la façon la plus facile de le faire. La meilleure façon de le faire dans mon cas s'est avéré être ce: Lorsque vous changez de route, vous n'avez qu'à y joindre un message comme ceci:
browserHistory.push({pathname: '/pathname', state: {message: "hello, im a passed message!"}});
ou si vous le faites par le biais d'un lien:
<Link
to={{
pathname: '/pathname',
state: { message: 'hello, im a passed message!' }
}}/>
source: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md
Dans le composant que vous essayez d'atteindre, vous pouvez accéder à la variable comme ceci par exemple:
componentDidMount: function() {
var recievedMessage = this.props.location.state.message
},
j'espère que cela aide! :)
2 réponses
tl;dr votre meilleur pari est d'utiliser un magasin comme redux
ou mobx
lors de la gestion de l'état qui doit être accessible tout au long de votre application. Ces bibliothèques permettent à vos composants à connecter à/observer l'état et être à jour de toutes les modifications de l'état.