Modification des paramètres dans l'URL sans actualiser dans React-Router

Cette fois, je vais vous apporter les paramètres de modification de l'URL dans React-Router sans actualisation. Quelles sont les précautions pour modifier les paramètres de l'URL dans React-Router sans actualisation. Ce qui suit est un. cas pratique. Jetons un coup d'oeil.

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 étapes pour implémenter la récupération et la mise à jour en temps réel de la zone de saisie dans vue2.0

JS pour implémenter une fonction de panier simple Analyse de code

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!