Je suis vraiment ravi de partager avec vous aujourd'hui certaines   . React Router est un outil incroyable qui nous permet de créer une navigation dynamique et fluide dans nos applications   . techniques avancées de React Router React  Bien qu'il soit couramment utilisé pour les besoins de routage de base, il existe des techniques moins connues qui peuvent élever vos capacités de routage à un tout autre niveau.  Aujourd'hui, je vais partager quelques-uns de mes favoris que j'ai découverts au fil du temps.  Nous couvrirons :  Gestion de la fameuse page 404.  Création d'un indicateur de page active pour mettre en évidence l'itinéraire actuel.  Utilisation des crochets   et   . useNavigate useLocation  Lorsque vous aurez fini de lire cet article, vous maîtriserez parfaitement ces techniques avancées de React Router et vous vous sentirez en confiance pour les appliquer dans vos propres projets.  Alors, plongeons-nous dans le vif du sujet et améliorons ensemble nos compétences en matière de routage !  Es-tu prêt? Commençons!  Traiter une page 404   Lorsque vous travaillez sur des projets plus importants, il est essentiel de prendre soin des itinéraires introuvables. Nous appelons souvent ces routes des   car elles renvoient le   404 lorsqu'un document n'est pas trouvé sur le serveur. routes 404 code d'état HTTP  Au fait, si vous aimez les chats, vous aimerez peut-être consulter   . http.cat  Passons maintenant à la création d'une route spéciale qui sera déclenchée chaque fois qu'aucune des autres routes ne correspond à l'URL actuelle dans le navigateur.   import {BrowserRouter, Routes, Route} from "react-router-dom"; function App() { return <BrowserRouter> <Routes> <Route path="/" element={<p>Landing page</p>}></Route> <Route path="/products" element={<p>Products page</p>}></Route> <Route path="*" element={<p>404 page</p>}></Route> </Routes> </BrowserRouter> }  Lors de l'accès à la page principale   , les utilisateurs seront dirigés vers la page d'accueil. Naviguer vers la page   les mènera à la page Produits. Cependant, si vous accédez à d'autres liens qui ne correspondent pas à un itinéraire spécifique, la page 404 s'affichera. / /products  La raison de ce comportement est l'implémentation d'un   spécialisé pour la page 404, où la propriété path est définie sur   . Cette configuration garantit que React Router utilisera exclusivement cette route lorsqu'aucune autre route ne peut être mise en correspondance. L'emplacement spécifique de l'itinéraire 404 est sans conséquence et peut être positionné n'importe où dans la section   , en tant que partie intégrante de celle-ci. <Route> * <Routes>...</Routes>  Page active  Une autre façon pour les applications d'utiliser les itinéraires de manière pratique consiste à mettre en surbrillance la page actuellement active dans le menu.  Imaginons que vous ayez un menu de navigation avec deux liens :  Accueil - Ce lien amène l'utilisateur à la page principale   . /  À propos - Ce lien amène l'utilisateur à la page à propos   . /about  Avec React Router, il devient possible de mettre automatiquement en surbrillance le lien   lorsque l'utilisateur est sur la route   . De même, vous pouvez mettre en surbrillance le lien Accueil lorsque l'utilisateur est sur la route   . La meilleure partie est que vous pouvez y parvenir sans avoir besoin de conditions complexes. About /about /  Voici un moyen simple de le faire fonctionner :   import {NavLink} from "react-router-dom"; function getClassName({isActive}) { if (isActive) { return "active"; // CSS class } } function App() { return <ul> <li> <NavLink to="/" className={getClassName}>Home</NavLink> </li> <li> <NavLink to="/about" className={getClassName}>About</NavLink> </li> </ul> }  Le code que vous voyez ci-dessus a besoin de CSS pour faire fonctionner la classe   . Nous pouvons donc l'améliorer en faisant en sorte que le lien de menu de la page actuellement active apparaisse en gras et se démarque. active   .active { font-weight: bold; }  L'attribut   de l'élément   a la possibilité d'accepter une fonction au lieu d'une simple chaîne. Lorsque vous décidez d'utiliser une fonction, un objet lui sera donné en tant que paramètre, et cet objet aura la propriété   déjà définie dessus. Pour accéder facilement à cette propriété au sein de la fonction, nous utilisons la déstructuration en incluant   dans le paramètre. className NavLink isActive {isActive}  Ensuite, nous procédons à la vérification si   contient une valeur de vérité. Si tel est le cas, nous renverrons le nom de la classe     . isActive CSS active  Lorsque le chemin actuel dans React Router correspond à l'attribut   du composant   , la fonction   sera évaluée à une valeur booléenne. to NavLink isActive  En conséquence, React Router inclura de manière transparente la classe   dans l'élément   correspondant, l'indiquant comme la route actuellement active. active <NavLink />  Version plus courte  Si vous préférez une approche plus courte, vous pouvez utiliser l'opérateur ternaire pour refactoriser le code mentionné ci-dessus. Cet opérateur permet de remplacer une instruction if/else en utilisant le format :   . condition ? truthy expression : falsy expression  Je n'utilise pas vraiment beaucoup l'opérateur ternaire car il peut souvent rendre le code moins lisible. Cependant, il est acceptable de l'utiliser dans ce cas.  Considérez ce qui suit comme exemple :   function getClassName({isActive}) { if (isActive) { return "active"; } else { return ""; } }  Vous pouvez remplacer le code ci-dessus par l'approche suivante :   function getClassName({isActive}) { return isActive ? "active" : ""; }  Vous devez simplement vous assurer que l'instruction return est placée en dehors de l'opérateur ternaire. Lorsque la condition   est vraie, l'expression après   sera exécuté   . Sinon, l'expression après   sera exécutée   . isActive ? "active" : ""  Maintenant, nous pouvons éliminer le besoin d'une définition de fonction distincte appelée   . Au lieu de cela, nous pouvons utiliser une fonction fléchée comme celle-ci :   . getClassName ({isActive}) => isActive ? "active" : ""  Si vous trouvez ce changement trop difficile à lire, vous pouvez continuer à utiliser une fonction distincte comme avant.  Le code final ressemblerait à ceci :   import {NavLink} from "react-router-dom"; function App() { return <ul> <li> <NavLink to="/" className={({isActive}) => isActive ? "active" : ""}>Home</NavLink> </li> <li> <NavLink to="/about" className={({isActive}) => isActive ? "active" : ""}>About</NavLink> </li> </ul> }  Oh boy, je peux pratiquement entendre vos pensées !  Sojin, vous avez rompu le principe DRY, n'est-ce pas ?  C'est juste un exemple. Pas besoin de s'énerver 😀  Choisir entre Link et NavLink : qu'est-ce qui les distingue ?  Vous avez peut-être déjà remarqué que j'utilise   au lieu de notre ami habituel,   . Mais ne vous inquiétez pas, laissez-moi vous expliquer pourquoi. Vous voyez, le composant   ne vous permet pas d'utiliser une définition de fonction pour la prop   . Oui, cela peut être surprenant, mais c'est comme ça quand vous travaillez avec   . NavLink Link <Link /> className <Link />  Une erreur courante que j'ai vue est que les développeurs juniors de React essaient d'utiliser des définitions de fonction dans le prop   d'un composant   , ce qui ne fonctionne tout simplement pas. className <Link />  Si cela vous intéresse, je peux écrire un article sur ce sujet. Faites-le moi savoir dans les commentaires!   utiliserNaviguer  Dans certaines circonstances, vous devrez peut-être déplacer par programmation des pages dans votre application React. Par exemple, pour rediriger le visiteur vers une page spécifique, vous pouvez soumettre une demande et attendre la réponse.  Voici quelques exemples:  Si l'utilisateur n'est pas connecté, renvoyez-le à la page de connexion.  Une fois la requête getLogin terminée avec succès, redirigez l'utilisateur vers le   . /dashboard  Cela nécessite l'utilisation du crochet   , qui renvoie une fonction que vous pouvez utiliser pour rediriger par programme l'utilisateur vers une nouvelle route. useNavigate()  Regarde:   import React, {useEffect} from "react"; import {useNavigate} from "react-router-dom"; function HelpPage() { const navigate = useNavigate(); useEffect(() => { const isLoggedIn = window.localStorage.getItem("isLoggedIn"); if (!isLoggedIn) { navigate("/login"); } }, []); return <h2>Help page</h2>; }  L'utilisation de BrowserRouter est essentielle !  Dans cet exemple, nous vérifions si le localStorage a une valeur affectée à la clé   . Si ce n'est pas le cas, nous redirigerons l'utilisateur vers la page   à l'aide de la   . isLoggedIn /login navigate("/login")  Pour que cela fonctionne, n'oubliez pas d'utiliser le hook   dans un composant imbriqué dans le composant   . Sinon, il ne fonctionnera pas correctement. useNavigate() <BrowserRouter />  Par exemple, l'exemple suivant ne fonctionnera pas :   import React from "react"; import {BrowserRouter, useNavigate} from "react-router-dom"; function App() { // ❌ This breaks because the component was not wrapped by BrowserRouter, but its children are. const history = useNavigate(); return <BrowserRouter> {/* ... */} </BrowserRouter>; }  Si vous essayez d'utiliser le hook   dans le composant   , vous risquez de rencontrer un petit problème. En effet, cela ne fonctionnera que si vous enveloppez le composant   avec   . useNavigate() App() App() <BrowserRouter />  Mais ne vous inquiétez pas !  La bonne nouvelle est que tous les composants enfants dans App seront automatiquement enveloppés par   , vous pouvez donc utiliser   dans ces composants enfants sans aucun problème. <BrowserRouter /> useNavigate()  Cependant, si vous avez vraiment besoin d'utiliser   dans le composant   lui-même, il existe une solution simple. Il vous suffit de créer un composant parent qui encapsule   et assurez-vous de déplacer le   à l'intérieur de ce composant parent. Une fois que vous avez fait cela, vous serez prêt à partir et pourrez utiliser   dans le composant   à votre guise 💗 useNavigate() <App /> <App /> <BrowserRouter /> useNavigate() <App />  Garantir l'accessibilité et l'utilisation correcte des liens  Lorsqu'il s'agit de rendre votre site Web accessible, il est important de prêter attention à la façon dont vos liens sont structurés. Pour garantir cela, il est recommandé d'utiliser des éléments   au lieu d'autres méthodes. <Link />  Pourquoi?  Eh bien, ces éléments s'afficheront automatiquement sous la forme de balises   , connues pour leurs   . <a> fonctionnalités d'accessibilité  Maintenant, voici une astuce conviviale : évitez de remplacer vos éléments   normaux par la méthode   fournie par   . Cette méthode ne doit être utilisée que dans les cas où l'utilisation d'un élément   n'est pas possible. <Link /> .push() useNavigate() <Link />  Quand est-ce que ça arrive ?  En règle générale, c'est lorsque vous devez rediriger les utilisateurs par programme en fonction d'une certaine logique, comme le résultat d'une opération   . fetch()   utiliserEmplacement  Et si vous vouliez exécuter un morceau de code chaque fois que React Router vous amène à une nouvelle adresse ?  Vous pouvez accomplir cela facilement à l'aide du hook   . Mais avant de plonger dans les détails, explorons quelques scénarios où cela peut être utile. L'un des cas d'utilisation les plus courants consiste à envoyer un événement   à votre service d'analyse, comme Google Analytics. useLocation de consultation de page  Cependant, il convient de mentionner que Google Analytics 4 s'en charge désormais automatiquement, vous n'avez donc pas nécessairement à l'implémenter vous-même.  Néanmoins, en savoir plus sur le crochet   est toujours utile, car vous pourriez lui trouver d'autres objectifs. Par exemple, vous pouvez l'utiliser pour vous intégrer à d'autres bibliothèques et services d'analyse, ou pour exécuter des actions spécifiques en fonction des itinéraires visités. useLocation  Les possibilités sont infinies!  crochet useLocation  Le crochet   est super pratique car il vous donne des informations sur la route actuellement utilisée. useLocation  Voici un guide convivial sur la façon d'utiliser le crochet useLocation :   import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom"; import {createRoot} from "react-dom/client"; function App() { const location = useLocation(); console.log(location.pathname); return <Routes> {/* routes here... */} </Routes> } createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>);  Maintenant, vous pouvez accéder aux informations d'itinéraire via la variable d'emplacement. C'est un objet qui contient le   actuel. pathname  Pour savoir quel itinéraire l'utilisateur parcourt actuellement, utilisez simplement   . Cela vous donnera quelque chose comme   ,   ou tout autre itinéraire que vous avez configuré. location.pathname / /about  N'oubliez pas que, tout comme avec le crochet   , il est important que votre code s'exécute dans un composant enveloppé par   . Sinon, le crochet   ne fera pas sa magie. useNavigate <BrowserRouter /> useLocation  Répondre aux changements d'emplacement  Lorsque l'emplacement change, vous pouvez utiliser le hook   pour accéder au chemin d'URL actuel dans React Router. En enveloppant votre code avec un hook   et en définissant la dépendance sur   , vous pouvez exécuter un morceau de code spécifique chaque fois qu'il y a une navigation vers une nouvelle URL. useLocation useEffect location  Voici un exemple de la façon de procéder :   import React, {useEffect} from "react"; import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom"; import {createRoot} from "react-dom/client"; function App() { const location = useLocation(); // run a piece of code on location change useEffect(() => { console.log(location.pathname); // send it to analytic, or do some conditional logic here }, [location]); return <Routes> {/* routes here... */} </Routes> } createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>);  Chaque fois que l'utilisateur se déplace vers un nouvel itinéraire pendant la navigation, le code à l'intérieur du hook   s'exécutera et fera son travail. C'est essentiellement un moyen de s'assurer qu'un code spécifique est exécuté chaque fois qu'il y a un changement dans l'objet de localisation. useEffect  Bon travail, maintenant vous êtes un expert en routeur React 🥳  Pour conclure, cet article vous a permis de mieux comprendre React Router. Bien que vous ne puissiez pas utiliser toutes les fonctionnalités décrites ici. C'est quand même fantastique que vous les connaissiez. Si jamais vous avez besoin d'intégrer des fonctionnalités similaires à l'avenir, vous savez exactement où chercher. Alors, assurez-vous de sauvegarder ou de mettre en signet ce message pour une référence facile. Et rappelez-vous, si vous avez des questions ou avez besoin d'aide supplémentaire, n'hésitez pas à me contacter sur Twitter. Je suis là pour vous aider !

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Techniques avancées du routeur React V6 : aller au-delà des bases

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Le modèle Bitcoin UTXO, alimentant un écosystème unique

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Le modèle Bitcoin UTXO, alimentant un écosystème unique

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps