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! :)

34
demandé sur ptim 2017-01-04 17:20:06

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.

qu'est Ce qu'un