Comment utiliser React Router V6: un guide du débutant

React Router est la bibliothèque la plus populaire que vous pouvez utiliser pour implémenter le routage dans les applications React. Il fournit une approche basée sur des composants pour gérer diverses tâches de routage, notamment la navigation dans les pages, les paramètres de requête et bien d'autres.

React Router V6 introduit des modifications importantes dans l'algorithme de routage, pour résoudre les pièges présents dans sa version précédente et fournir une solution de routage améliorée.

Premiers pas avec le routage à l'aide de React Router V6

Pour commencer, créer une application React. Alternativement, configurer un projet React en utilisant Vite. Après avoir créé le projet, continuez et installez le réagir-routeur-dom emballer.

npm install react-router-dom

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

Pour créer des itinéraires, commencez par envelopper l'ensemble de l'application avec un NavigateurRouteur composant. Mettez à jour le code dans votre index.jsx ou main.jsx déposer comme suit :

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { BrowserRouter as Router } from'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(



 </Router>
 </React.StrictMode>,
)

L'encapsulation du 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 itinéraires.

Le Itinéraires composant est une amélioration de la Changer composant qui était auparavant utilisé par React Router v5. 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.

En règle générale, vous ajouterez des itinéraires au niveau le plus élevé de votre application, souvent au sein du composant App. Cependant, vous pouvez les définir à n'importe quel autre endroit, en fonction de la structure de votre projet.

Ouvrez le App.jsx fichier et remplacez le code React passe-partout par ce qui suit :

import'./App.css'
import { Routes, Route } from'react-router-dom';
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
functionApp() {
return (
 <>

"/" element={} />
"/about" element={} />
 </Routes>
 </>
 )
}
exportdefault App

Cette configuration de routage mappe des chemins d'URL spécifiques aux composants de page correspondants (Tableau de bord et À propos), garantissant que l'application restitue le composant approprié lorsqu'un utilisateur visite un site particulier. URL.

Remarquez le élément prop, au sein du composant Route, qui vous permet de transmettre un composant fonctionnel plutôt que simplement le nom du composant. Cela permet de transmettre les accessoires sur les itinéraires et leurs composants associés.

Dans le src répertoire, créez un nouveau pages répertoire et ajoutez deux nouveaux fichiers: Tableau de bord.jsx et À propos de.jsx. Allez-y et définissez les composants fonctionnels dans ces fichiers pour tester les itinéraires.

Utilisation de createBrowserRouter pour définir des itinéraires

Documentation de React Router recommande d'utiliser le createBrowserRouter composant pour définir la configuration de routage pour les applications Web React. Ce composant est une alternative légère à NavigateurRouteur qui prend comme argument un ensemble d’itinéraires.

En utilisant ce composant, il n'est pas nécessaire de définir vos itinéraires dans le composant App. Au lieu de cela, vous pouvez décrire toutes vos configurations d'itinéraire dans le index.jsx ou main.jsx déposer.

Voici un exemple de la façon dont vous pouvez utiliser ce composant :

import React from'react'
import ReactDOM from'react-dom/client'
import { createBrowserRouter, RouterProvider } from"react-router-dom";
import App from'./App.jsx'
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
const router = createBrowserRouter([
 {
 path: "/",
 element: <App />,
 },
 {
 path: "/dashboard",
 element: <Dashboard />,
 },
 {
 path: "/about",
 element: <About />,
 },
]);
ReactDOM.createRoot(document.getElementById("root")).render(


 </React.StrictMode>
);

La configuration de routage utilise le createBrowserRouter et Fournisseur de routeur composants pour 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'encapsuler l'application à l'aide du composant BrowserRouter, elle utilise le Fournisseur de routeur composant pour passer le Routeur contexte à tous les composants de l’application.

Implémentation d'itinéraires de page introuvable

Le chemin prop dans le composant Route compare le chemin fourni à l'URL actuelle pour déterminer s'il existe une correspondance avant de restituer le composant requis.

Pour gérer les cas où aucune route ne correspond, vous pouvez créer une route spécifique qui gérera Erreurs 404 page introuvable. L'inclusion de cette route garantit que les utilisateurs peuvent recevoir des réponses significatives dans les situations où ils ont accédé à une URL inexistante.

Pour implémenter une route 404, ajoutez cette route dans le composant Routes :

// using the Route component
"*" element={} /> 
// using createBrowserRouter
{ path: "*", element: <NotFound />, },

Ensuite, créez un personnalisé NotFound.jsx composant et enfin, styliser le composant à l'aide de modules CSS.

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

Navigation programmatique à l’aide du hook useNavigate

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

Voyons comment utiliser le utiliserNaviguer crochet pour la navigation programmatique. En supposant que vous ayez créé le À propos de.jsx composant fonctionnel, importez le hook depuis le package React Router :

import { useNavigate } from'react-router-dom';

Ajoutez ensuite un bouton qui, lorsque vous cliquez dessus, déclenche la navigation vers un itinéraire spécifié.

functionAbout() {
const navigate = useNavigate();
const handleButtonClick = () => {
 navigate("/");
 };
return (
 <>
// Rest of the code ...

 </>
 );
}
exportdefault About;

Il convient de mentionner que les hooks useNavigate et 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 navigation en cours et d'autres détails. Ceci est utile lorsque vous souhaitez restituer des éléments de l'interface utilisateur tels que le chargement de spinners pour fournir un retour visuel sur les processus en cours.

Voici un exemple de la façon dont vous pouvez utiliser le hook useNavigation.

import { useNavigation } from"react-router-dom";
functionSubmitButton() {
const navigation = useNavigation();
const buttonText =
 navigation.state "submitting"
? "Saving..."
: navigation.state "loading"
? "Saved!"
: "Go";
return<buttontype="submit">{buttonText}button>;
}

Dans cet exemple, le Bouton de soumission Le composant mettra à jour dynamiquement son texte en fonction de l’état de navigation obtenu à partir du hook useNavigation.

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

Utilisation du crochet useRoutes

Ce hook vous permet de définir les chemins de routage ainsi que leurs composants correspondants au sein d'un objet. Par la suite, le crochet est ensuite utilisé pour faire correspondre les itinéraires et afficher les composants pertinents.

Voici un exemple simple d'utilisation du hook :

import { useRoutes } from'react-router-dom';
import Dashboard from'./Dashboard';
import About from'./About';
const routes = [
 {
 path: '/',
 element: <Dashboard/>,
 },
 {
 path: '/about',
 element: <About />,
 },
];
functionApp() {
const routeResult = useRoutes(routes);
return routeResult;
}
exportdefault App;

Dans cet exemple, le itinéraires L'objet définit le mappage des chemins d'URL vers les composants. Le Application Le composant utilise ensuite ce hook pour faire correspondre l'URL actuelle et restituer le composant approprié en fonction de l'itinéraire correspondant.

L'utilisation de ce hook vous donne un contrôle granulaire sur votre logique de routage et vous permet de créer facilement une logique de gestion de routage 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édéfini 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.