Le composant ne se remonte pas lorsque les paramètres d'itinéraire 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 se charge, je déclenche une demande de données pour ce projet à partir de l'événement componentDidMount. Je rencontre maintenant un problème où si je change directement entre deux projets, seul l'id change comme ça ...

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

componentDidMount n'est pas déclenché à nouveau, donc les données ne sont pas actualisées. Dois-je utiliser un autre événement de cycle de vie pour déclencher ma demande de données ou une stratégie différente pour résoudre ce problème?

Si le lien dirige vers la même route avec juste un paramètre différent, il ne s'agit pas de remontage, mais de recevoir de nouveaux accessoires. Ainsi, vous pouvez utiliser la componentWillReceiveProps(newProps)fonction 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. Regardez cet exemple. React Router Mega Demo . De cette façon, le composant chargerait les données et se mettrait à jour automatiquement lorsque les paramètres d'itinéraire changeraient sans avoir besoin de s'appuyer sur componentWillReceiveProps.

Si vous avez besoin d'un remontage de composant lorsque la route change, vous pouvez transmettre une clé unique à l'attribut clé de votre composant (la clé est associée à votre chemin / route). Ainsi, chaque fois que l'itinéraire change, la clé changera également ce qui déclenchera le démontage / remontage du composant React. 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.

<Route path="/page/:pageid" render={(props) => (
  <Page key={props.match.params.pageid} {...props} />)
} />

Vous devez être clair, qu'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() { <Project .../> }
}

Si tu as:

<Route
   render={(props) => <Component {...props} />}
   path="/project/:projectId/"
/>

Dans React 16.8 et au-dessus, en utilisant des hooks , vous pouvez faire:

import React, { useEffect } from "react";
const Component = (props) => {
  useEffect(() => {
    props.fetchResource();
  }, [props.match.params.projectId]);

  return (<div>Layout</div>);
}
export default Component;

À l'intérieur, vous ne déclenchez un nouvel fetchResourceappel que chaque fois que cela props.match.params.idchange.

Sur la base des réponses de @wei, @ Breakpoint25 et @PaulusLimma, j'ai créé ce composant de remplacement pour le <Route>. Cela remontera la page lorsque l'URL changera, forçant tous les composants de la page à être créés et montés à nouveau, pas simplement re-rendus. Tous componentDidMount()et tous les autres hooks de démarrage sont également exécutés lors du changement d'URL.

L'idée est de changer la keypropriété des composants lorsque l'URL change et cela oblige React à remonter le composant.

Vous pouvez l'utiliser comme remplacement instantané pour <Route>, par exemple, comme ceci:

<Router>
  <Switch>
    <RemountingRoute path="/item/:id" exact={true} component={ItemPage} />
    <RemountingRoute path="/stuff/:id" exact={true} component={StuffPage} />
  </Switch>
</Router>

Le <RemountingRoute>composant est défini comme ceci:

export const RemountingRoute = (props) => {
  const {component, ...other} = props
  const Component = component
  return (
    <Route {...other} render={p => <Component key={p.location.pathname + p.location.search}
                                              history={p.history}
                                              location={p.location}
                                              match={p.match} />}
    />)
}

RemountingRoute.propsType = {
  component: PropTypes.object.isRequired
}

Cela a été testé avec React-Router 4.3.

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 se diriger. De plus, si le chemin d'accès au composant est statique, mais que vous voulez simplement que le composant soit remonté chaque fois que l'utilisateur y accède (peut-être pour faire un appel API à componentDidMount ()), il est pratique de définir location.pathname sur la clé de la route. Avec son itinéraire et tout son contenu est remonté lorsque l'emplacement change.

const MainContent = ({location}) => (
    <Switch>
        <Route exact path='/projects' component={Tasks} key={location.pathname}/>
        <Route exact path='/tasks' component={Projects} key={location.pathname}/>
    </Switch>
);

export default withRouter(MainContent)

Voici comment j'ai résolu le problème:

Cette méthode obtient l'élément individuel de l'API:

loadConstruction( id ) {
    axios.get('/construction/' + id)
      .then( construction => {
        this.setState({ construction: construction.data })
      })
      .catch( error => {
        console.log('error: ', error);
      })
  }

J'appelle cette méthode à partir de componentDidMount, cette méthode ne sera appelée qu'une seule fois, lorsque je charge cette route pour la première fois:

componentDidMount() {   
    const id = this.props.match.params.id;
    this.loadConstruction( id )
  }

Et à partir de componentWillReceiveProps qui sera appelé depuis la deuxième fois, nous chargeons la même route mais un ID différent, et j'appelle la première méthode pour recharger l'état, puis le composant chargera le nouvel élément.

componentWillReceiveProps(nextProps) {
    if (nextProps.match.params.id !== this.props.match.params.id) {
      const id = nextProps.match.params.id
      this.loadConstruction( id );
    }
  }

Si vous utilisez Class Component, vous pouvez utiliser componentDidUpdate

componentDidMount() {
    const { projectId } = this.props.match.params
    this.GetProject(id); // Get the project when Component gets Mounted
 }

componentDidUpdate(prevProps, prevState) {
    const { projectId } = this.props.match.params

    if (prevState.projetct) { //Ensuring This is not the first call to the server
      if(projectId !== prevProps.match.params.projectId ) {
        this.GetProject(projectId); // Get the new Project when project id Change on Url
      }
    }
 }

Vous pouvez utiliser la méthode fournie:

useEffect(() => {
  // fetch something
}, [props.match.params.id])

lorsque le composant est garanti de nouveau rendu après le changement d'itinéraire, vous pouvez passer des accessoires en tant que dépendance

Ce n'est pas le meilleur moyen mais assez bon pour gérer ce que vous recherchez selon Kent C Dodds : Considérez davantage ce que vous voulez qu'il se passe.

react-router est cassé car il doit remonter les composants à tout changement d'emplacement.

J'ai réussi à trouver un correctif pour ce bogue:

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

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

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

Cela le fera remonter à tout changement d'URL