Maison > interface Web > js tutoriel > Comment gérer le paramètre Url dans React-Router sans actualiser la page

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

php中世界最好的语言
Libérer: 2018-05-31 10:01:39
original
1579 Les gens l'ont consulté

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>
    );
  }
}
Copier après la connexion

Selon la documentation officielle, vous pouvez utiliser

this.props.match.params
Copier après la connexion

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) {
 ...
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal