Quels sont les moyens de modifier les paramètres d'URL dans React-Router sans actualiser la page ?

Cette fois, je vais vous expliquer quelles sont les façons de modifier les paramètres d'URL dans React-Router sans actualiser la page. Quelles sont les précautions pour modifier les paramètres d'URL dans React-Router sans actualiser la page. . Voici le combat réel. Jetons un coup d’œil au cas.

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 :

Explication détaillée des cas d'utilisation de la fonction de rappel JS

Explication détaillée des ajouts, suppressions et modifications courants et opérations de requête des éléments JS DOM

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!