Les crochets du routeur React

React Router V5 introduit un mécanisme de crochet puissant, fournissant quatre crochets de routage pratiques, simplifiant la gestion du routage. Cet article commencera rapidement avec le nouveau mode de React Router V5, introduisant d'abord le nouveau mode de rendu de routage, puis se plongeant dans l'utilisation de chaque crochet.

Router React avant V5

 // Rendez l'itinéraire et obtenez les attributs de l'itinéraire<route component="{Home}" path="/"></route>

// passe des propriétés supplémentaires<route path="/" render="{({" match><profile match="{match}" mine="{true}"></profile> } /></route>

Lorsque vous utilisez la syntaxe component , les propriétés de routage ( match , location et history ) sont implicitement transmises au composant. Mais si vous devez transmettre des propriétés supplémentaires, vous devez utiliser render à la place. Il convient de noter que l'ajout de fonctions en ligne à la syntaxe component entraînera le remontage du composant chaque fois qu'il est rendu.

Routeur de réact après V5

<route path="/"><home></home></route>

Home ne reçoit plus implicitement les propriétés de routage. Cependant, vous pouvez ajouter toutes les propriétés supplémentaires au composant Home sans modifier Route lui-même. Évitez le problème des composants de remontage à chaque fois qu'ils rendent, ce qui est une conception d'API plus concise et plus efficace.

Étant donné que les propriétés de routage ne sont plus implicitement passées, comment accéder match , history ou location ? Dois-je envelopper tous les composants avec withRouter ? C'est là que le crochet entre en jeu.

Notez que le crochet a été introduit dans React 16.8, donc React doit être utilisé.

Crochet de useHistory

• Donne accès aux attributs history dans le routeur React.
• Pointe vers history utilisées par l'itinéraire.
• Il est principalement utilisé pour le routage programmatique via des fonctions, telles que push , replace , etc.

 import {usehistory} de 'react-router-dom';

fonction home () {
  const History = useHistory ();
  return <button onclick="{()">history.push ('/ profil')}> profil</button> ;
}

crochet useLocation

• Donne accès à location dans le routeur React.
• Semblable à la window.location du navigateur.Location, mais il représente l'état de routage et l'emplacement et peut être accessible n'importe où.
• Principalement utilisé pour accéder aux paramètres de requête ou terminer les chaînes de routage.

 import {uselocation} de 'react-router-dom';

Profil de fonction () {
  const localisation = uselocation ();
  useEFFECT (() => {
    const CurrentPath = location.pathName;
    const searchParams = new UrlSearchParams (location.search);
    // ... utilisez CurrentPath et SearchParams
  }, [emplacement]);
  Retour<p> Profil</p> ;
}

Étant donné que location est immuable, useEffect appelle la fonction chaque fois que l'itinéraire change, ce qui est idéal pour manipuler les paramètres de recherche ou les chemins actuels.

Hook useParams

• Donne accès aux paramètres dans l'URL.
• Cette fonctionnalité n'était auparavant mise en œuvre que via match.params .

 import {useParams, Route} à partir de 'react-Router-Dom';

Profil de fonction () {
  const {name} = useParams ();
  Retour<p> Profil de {nom}</p> ;
}

Function Dashboard () {
  Retour (
    <div>
      <nav>
        <link to="{`/profile/ann`}">Profil d'Ann
      </nav>
      <main>
        <route path="/profile/:name"><profile></profile></route>
      </main>
    </div>
  ));
}

useRouteMatch

• Fournit un accès aux objets match .
• S'il n'y a pas d'argument, la correspondance la plus proche du composant ou de son composant parent est renvoyée.
• Principalement utilisé pour construire des chemins imbriqués.

 Importer {useroutematch, route} à partir de 'react-Router-Dom';

fonction auth () {
  const Match = useroutematch ();
  Retour (
    <div>
      <route path="{`${match.url}/login`}"><login></login></route>
      <route path="{`${match.url}/register`}"><register></register></route>
    </div>
  ));
}

useRouteMatch peut également être utilisé pour accéder aux objets match sans rendre Route en passant par les paramètres location .

Par exemple, supposons que vous deviez rendre votre profil dans /profile , et si l'URL contient le nom de la personne ( /profile/dan ou /profile/ann ), rendez le profil des autres. Si vous n'utilisez pas de crochet, vous devez écrire un Switch , énumérer deux itinéraires et personnaliser avec les accessoires. Mais maintenant, l'utilisation de Hook peut faire ceci:

 Importer {Route, Browserrouter comme routeur, link, useroutEmatch} à partir de 'React-Router-Dom';

Profil de fonction () {
  const Match = useroutematch ('/ profil /: name');
  revanche?<p> Profil de Match.params.name}</p> :<p> Mon propre profil</p> ;
}

Exporter la fonction par défaut App () {
  Retour (
    <router>
      <nav>
        <link to="/profile">Mon profil
        <br>
        <link to="{`/profile/ann`}">Profil d'Ann
      </nav>
      <route path="/profile"><profile></profile></route>
    </router>
  ));
}

Vous pouvez également transmettre toutes les propriétés Route comme exact ou sensitive en tant qu'objets à useRouteMatch .

Résumer

Le crochet et Route explicite eux-mêmes ont des avantages cachés. Ces crochets aident à éviter une grande partie de la confusion et de la complexité qui ont émergé dans les premiers modes, à réduire les erreurs humaines, à rendre le code de routage plus facile à maintenir et plus facile à mettre à niveau vers la nouvelle version du routeur React.

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!