Composant ne remonte pas lorsque les parameters de route changent

Je travaille sur une application de réaction utilisant react-router. J’ai une page de projet qui a une url comme suit:

myapplication.com/project/unique-project-id 

Lorsque le composant de projet est chargé, je déclenche une demande de données pour ce projet à partir de l’événement componentDidMount. Je me heurte maintenant à un problème: si je passe directement d’un projet à l’autre, seul l’id change comme ceci …

 myapplication.com/project/982378632 myapplication.com/project/782387223 myapplication.com/project/198731289 

componentDidMount n’est pas déclenché à nouveau, de sorte que les données ne sont pas actualisées. Y a-t-il un autre événement du cycle de vie que je devrais utiliser pour déclencher ma demande de données ou une stratégie différente pour résoudre ce problème?

Si le lien est dirigé vers la même route avec un paramètre différent, il ne sera pas remonté, mais recevra de nouveaux accessoires. Vous pouvez donc utiliser la fonction componentWillReceiveProps(newProps) et rechercher newProps.params.projectId .

Si vous essayez de charger des données, je vous recommande de récupérer les données avant que le routeur ne gère la correspondance en utilisant des méthodes statiques sur le composant. Découvrez cet exemple. Réagir Méga Démo du Routeur . De cette manière, le composant chargerait les données et se mettrait automatiquement à jour lorsque les parameters de la route changeraient sans avoir besoin de s’appuyer sur componentWillReceiveProps .

Si vous avez besoin de remonter un composant lorsque la route change, vous pouvez transmettre une clé unique à l’atsortingbut clé de votre composant (la clé est associée à votre chemin / itinéraire). Ainsi, chaque fois que la route change, la clé change également les déclencheurs du composant React à démonter / remonter. J’ai eu l’idée de cette réponse

Voici ma réponse, similaire à certaines des réponses ci-dessus, mais avec du code.

  ( ) } /> 

Vous devez être clair, un changement d’itinéraire ne provoquera pas une actualisation de la page, vous devez le gérer vous-même.

 import theThingsYouNeed from './whereYouFindThem' export default class Project extends React.Component { componentWillMount() { this.state = { id: this.props.router.params.id } // fire action to update redux project store this.props.dispatch(fetchProject(this.props.router.params.id)) } componentDidUpdate(prevProps, prevState) { /** * this is the initial render * without a previous prop change */ if(prevProps == undefined) { return false } /** * new Project in town ? */ if (this.state.id != this.props.router.params.id) { this.props.dispatch(fetchProject(this.props.router.params.id)) this.setState({id: this.props.router.params.id}) } } render() {  } } 

react-router est cassé car il doit remonter les composants à tout changement de lieu.

J’ai réussi à trouver un correctif pour ce bug si:

https://github.com/ReactTraining/react-router/issues/1982#issuecomment-275346314

En bref (voir le lien ci-dessus pour plus d’informations)

  { const { location } = props const key = `${location.pathname}${location.search}` props = { ...props, key } return React.createElement(component, props) } }/> 

Cela le fera remonter sur tout changement d’URL

La réponse de @ wei fonctionne très bien, mais dans certaines situations, je trouve préférable de ne pas définir de clé de composant interne, mais de la router elle-même. De plus, si le chemin d’access au composant est statique, mais que vous souhaitez simplement que le composant soit remonté chaque fois que l’utilisateur y accède (peut-être pour faire un appel à componentDidMount ()), vous pouvez définir location.pathname sur key of route. Avec elle, tout son contenu est remonté lorsque l’emplacement change.

 const MainContent = ({location}) => (     ); export default withRouter(MainContent)