Comment gérer le paramètre Url dans React-Router sans actualiser la page

Cette fois, je vais vous montrer comment gérer les paramètres d'URL dans React-Router. La page ne s'actualise pas. Quelles sont les précautions sur la façon de gérer les paramètres d'URL dans React-Router et la page ne s'actualise pas. rafraîchir Ce qui suit est un cas pratique. Jetons un coup d'œil.

Problème

J'ai trouvé un problème lors de l'écriture de la page aujourd'hui, c'est-à-dire lors de l'utilisation de la fonction de passage des paramètres d'URL dans React Router, comme celui-ci :

export class MainRouter extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          ...
          <Route exact path={&#39;/channel/:channelId&#39;} component={ChannelPerPage}/>
          ...
        </Switch>
      </BrowserRouter>
    );
  }
}

Selon la documentation officielle, vous pouvez utiliser

this.props.match.params

dans le composant ChannelPerPage pour obtenir la valeur du paramètre url, mais j'ai trouvé que si vous utilisez uniquement If les paramètres de l'URL changent, par exemple, lorsque le channelId passe de 1 à 2, la page ne sera pas actualisée.

Solution

Après avoir consulté les informations, j'ai trouvé que la cause première est que le changement d'accessoires n'entraîne pas la remise en état du composant -rendu, seul l'état Seules les modifications entraîneront le rendu du composant et les paramètres d'URL appartiennent aux accessoires, donc la modification des paramètres d'URL n'entraînera pas le rendu du composant.

Plus tard, j'ai découvert qu'il existe une méthode remplaçable dans le composant React

componentWillReceiveProps(nextProps) {
 ...
}

Cette méthode peut être remplacée dans le composant React. Cette méthode sera appelée lorsque les accessoires changent, donc vous. peut utiliser cette méthode pour obtenir nextProps et modifier le contenu de l'état dans cette méthode afin que le composant puisse être restitué.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment empaqueter un projet vue sur le serveur

Comment utiliser webstorm pour ajouter *. fichiers vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!