React force re-mount component on route change

Question

Comment puis-je remonter un composant lors d'un changement de route lorsque j'utilise le même composant pour les deux routes ?

Voici mon code.

routes.jsx

<Router history={browserHistory}>
  <Route path="/" component={Home} />
  <Route path="/foo/:fooId" component={Home} />
</Router>

J'ai un contrôle conditionnel dans Home composant pour fooId qui rend le JSX en conséquence.

<Link to="/foo/1234">fooKey</Link>

Pour l'instant, lorsqu'on clique sur fooKey l'itinéraire change et la fonction de rendu du composant Home est redéclenchée mais n'est pas montée à nouveau.

J'ai parcouru d'autres réponses qui mentionnaient componentWillReceiveProps mais j'ai beaucoup de configuration dans le constructor et je ne veux pas déplacer toute cette configuration vers componentWillReceiveProps .

Veuillez commenter si des informations supplémentaires sont nécessaires.

Answer 1

Si vous devez forcer le remontage d'un composant à chaque correspondance de routage, vous pouvez le faire en utilisant la commande clé propriété à moins que vous ne sachiez ce que vous faites :

<Route
  exact
  path={'some path'}
  render={props => <RemountAlways key={Date.now()} {...props} />}
/>

key={Date.now()} cette propriété clé forcera react à remonter à chaque fois.

Nota: composantWillReceiveProps est une mauvaise nouvelle en réaction.

Answer 2

Vous n'allez donc pas vouloir démonter et remonter votre composant à chaque fois que votre chaîne de requête change. Changez vos routes en ceci :

<Router history={browserHistory}>
  <Route path="/" component={Home} />
</Router>

Enveloppez votre <Home /> avec le composant avecRouter HoC fourni par React Router. Une fois que vous avez fait ça, ({ match, history, location }) sera disponible dans le <Home /> composant. Dans votre componentWillRecieveProps vous pouvez exécuter n'importe quelle logique qui nécessite des chaînes de requête sur props.location.search pour produire les résultats que vous souhaitez.

Answer 3

Apparemment, vous faites quelque chose de mal si vous devez forcer le remontage. En général, vous devriez réagir sur componentWillReceiveProps :

class DumbComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = this.propsToState(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.setState(this.propsToState(nextProps));
  }

  propsToState(props) {
    // place all of your state initialization dependent logic here
    return {
      foo: props.foo,
    };
  }

  render() {
    return <div>{this.state.foo}</div>
  }
}