Comment utiliser React Router V6 : Guide du débutant

React Router est la bibliothèque la plus populaire que vous pouvez utiliser pour mettre en œuvre le routage dans les applications React. Elle fournit une approche basée sur les composants pour gérer une variété de tâches de routage, y compris la navigation dans les pages, les paramètres de requête, et bien d’autres.

React Router V6 introduit quelques changements significatifs dans l’algorithme de routage, afin de remédier aux écueils présents dans sa version précédente, et de fournir une solution de routage améliorée.

Démarrer avec le routage à l’aide de React Router V6

Pour commencer, créez une application React. Vous pouvez également configurer un projet React à l’aide de Vite. Après avoir créé le projet, allez de l’avant et installez le fichier react-router-dom .

Création de routes à l’aide de React Router

Pour créer des routes, commencez par envelopper l’ensemble de l’application avec un package BrowserRouter . Mettez à jour le code de votre composant index.jsx ou main.jsx comme suit :

Le fait d’envelopper le composant App avec le composant BrowserRouter garantit que l’ensemble de l’application a accès au contexte de routage et aux fonctionnalités offertes par la bibliothèque React Router.

Utilisation du composant Routes

Une fois que vous avez enveloppé l’application avec le composant BrowserRouter, vous pouvez définir vos routes.

Le Routes est une amélioration de la composante Interrupteur Ce composant prend en charge le routage relatif, le classement automatique des itinéraires et la possibilité de travailler avec des itinéraires imbriqués.

Généralement, vous ajoutez des routes au niveau le plus élevé de votre application, souvent dans le composant App. Cependant, vous pouvez les définir à n’importe quel autre endroit, en fonction de la structure de votre projet.

Ouvrez la fenêtre App.jsx et remplacez le code React standard par ce qui suit :

Cette configuration de routage associe des chemins d’URL spécifiques aux composants de page correspondants (Tableau de bord et À propos), ce qui garantit que l’application rend le composant approprié lorsqu’un utilisateur visite une URL particulière.

Remarquez les éléments suivants de l’élément prop, dans le composant Route, qui vous permet de transmettre un composant fonctionnel plutôt que le simple nom du composant. Il est ainsi possible de transmettre des éléments fonctionnels aux routes et à leurs composants associés.

Dans l’élément src créez un nouveau fichier pages et ajoutez deux nouveaux fichiers : Dashboard.jsx et About.jsx. Allez-y et définissez des composants fonctionnels dans ces fichiers pour tester les itinéraires.

Utilisation de createBrowserRouter pour définir des routes

Documentation de React Router recommande d’utiliser l’option createBrowserRouter pour définir la configuration du routage pour les applications web React. Ce composant est une alternative légère à BrowserRouter qui prend un tableau de routes comme argument.

En utilisant ce composant, il n’est pas nécessaire de définir vos routes dans le composant App. Au lieu de cela, vous pouvez définir toutes vos configurations de routes dans le composant index.jsx ou main.jsx fichier.

Voici un exemple d’utilisation de ce composant :

La configuration du routage utilise le fichier createBrowserRouter et RouterProvider afin de créer un système de routage pour une application React.

Cependant, la seule différence avec cette implémentation est qu’au lieu d’envelopper l’application avec le composant BrowserRouter, elle utilise le composant RouterProvider pour transmettre le composant Router à tous les composants de l’application.

Mise en œuvre des routes « Page-Not-Found » (page non trouvée)

Les chemin du composant Route compare le chemin fourni à l’URL actuelle pour déterminer s’il y a correspondance avant de rendre le composant requis.

Pour gérer les cas où aucune route ne correspond, vous pouvez créer une route spécifique qui gérera les erreurs de page 404 non trouvée. L’inclusion de cette route permet aux utilisateurs de recevoir des réponses pertinentes lorsqu’ils ont accédé à une URL inexistante.

Pour mettre en place une route 404, ajoutez cette route dans le composant Routes :

Ensuite, créez une route personnalisée NotFound.jsx et enfin, stylisez le composant à l’aide de modules CSS.

L’astérisque (*) est un caractère de remplacement qui permet de gérer les scénarios dans lesquels aucune des routes spécifiées ne correspond à l’URL actuelle.

Navigation programmatique à l’aide du crochet useNavigate

Les useNavigate fournit un moyen programmatique de gérer la navigation dans les applications. Ce crochet est particulièrement utile lorsque vous souhaitez déclencher la navigation en réponse aux interactions ou aux événements de l’utilisateur, tels que les clics sur des boutons ou les soumissions de formulaires.

Voyons comment utiliser le crochet useNavigate pour la navigation programmatique. En supposant que vous ayez créé le hook About.jsx importez le crochet à partir du paquet React Router :

Ajoutez ensuite un bouton qui, lorsqu’il est cliqué, déclenche la navigation vers une route spécifiée.

Il convient de mentionner que le crochet useNavigate et le crochet useNavigation, introduits dans React Router v6, servent des objectifs distincts malgré leurs noms étroitement liés.

Le hook useNavigation vous permet d’accéder aux détails liés à la navigation, comme l’état de la navigation en cours et d’autres spécificités. Cela est utile lorsque vous souhaitez rendre des éléments d’interface utilisateur tels que des spinners de chargement pour fournir un retour visuel sur les processus en cours.

Voici un exemple d’utilisation du crochet useNavigation.

Dans cet exemple, l’élément BoutonSoumettre met à jour dynamiquement son texte en fonction de l’état de la navigation obtenu à partir du crochet useNavigation.

Même si ces crochets ont des rôles différents, vous pouvez les utiliser ensemble. Le hook useNavigate pour initier le processus de navigation et le hook useNavigation pour récupérer les détails de la navigation en temps réel, qui guident ensuite le type d’interface utilisateur de retour d’information à rendre sur le navigateur.

Utilisation du crochet useRoutes

Ce crochet vous permet de définir les itinéraires et leurs composants correspondants dans un objet. Par la suite, le crochet est utilisé pour faire correspondre les itinéraires et afficher les composants correspondants.

Voici un exemple simple de l’utilisation de ce crochet :

Dans cet exemple, le composant itinéraires définit la correspondance entre les chemins d’accès URL et les composants. L’objet App utilise alors ce crochet pour faire correspondre l’URL actuelle et rendre le composant approprié en fonction de l’itinéraire correspondant.

L’utilisation de ce crochet vous donne un contrôle granulaire sur votre logique de routage et vous permet de créer facilement une logique de traitement des itinéraires personnalisée pour votre application.

Gestion du routage dans les applications React

Bien que React lui-même n’inclue pas de mécanisme préconstruit pour gérer les tâches de routage, React Router comble cette lacune. Il fournit divers composants de routage et fonctions utilitaires que vous pouvez facilement utiliser pour créer des applications interactives et conviviales.