Comprendre les bases de React Router : gérer la navigation dans React

Bases du routeur React

React Router est une bibliothèque puissante utilisée pour le routage dans les applications React. Il permet aux développeurs de définir des itinéraires dans leur application et de gérer la navigation entre différentes vues ou composants. React Router facilite la création d'applications monopage (SPA) en gérant le routage dynamique et la navigation basée sur les URL.

---

Concepts clés de React Router

1. Routage : Il fait référence au processus de navigation d'une URL à une autre au sein de votre application.
2. SPA (Single Page Application) : React Router est conçu pour les SPA, où l'application est chargée une fois et seules certaines parties de la page sont mises à jour lorsque l'utilisateur navigue vers différents itinéraires.

---

Composants de base de React Router

1. BrowserRouter (ou HashRouter) :
   • Ce composant est le wrapper qui contient votre logique de routage et est utilisé pour activer la navigation.
   • BrowserRouter utilise l'API d'historique HTML5 pour manipuler l'URL du navigateur et maintenir l'interface utilisateur synchronisée.
   • Pour les navigateurs plus anciens ou dans les cas où l'API d'historique HTML5 n'est pas prise en charge, HashRouter peut être utilisé (bien qu'il utilise un routage basé sur le hachage).

Exemple :

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

   const App = () => {
     return (
       <BrowserRouter>
         <Routes />
       </BrowserRouter>
     );
   };

1. Itinéraires :
   • Les Le composant est utilisé pour définir toutes les routes de votre application. Il agit comme un conteneur pour les éléments de route individuels.
   • Dans React Router v6, Routes remplace le composant Switch précédent.

Exemple :

   import { Routes, Route } from 'react-router-dom';

   const Routes = () => {
     return (
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
       </Routes>
     );
   };

1. Itinéraire :
   • L' Le composant définit un mappage entre un chemin d'URL et un composant.
   • La prop path définit l'URL et la prop element spécifie le composant qui doit s'afficher lorsque l'itinéraire correspond.

Exemple :

   <Route path="/" element={<Home />} />

1. Lien :
   • Le Le composant est utilisé pour naviguer entre différents itinéraires sans recharger la page. Il affiche une balise d'ancrage () qui réagit aux événements de clic et met à jour l'URL du navigateur en conséquence.

Exemple :

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

   const Navigation = () => {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   };

1. utiliserNavigate :
   • Le hook useNavigate est utilisé pour naviguer par programme vers différents itinéraires.
   • Ce hook est généralement utilisé dans les gestionnaires d'événements ou les effets secondaires.

Exemple :

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

   const App = () => {
     return (
       <BrowserRouter>
         <Routes />
       </BrowserRouter>
     );
   };

---

Exemple de routage de base

Voici un exemple de base qui illustre React Router dans une application React fonctionnelle :

   import { Routes, Route } from 'react-router-dom';

   const Routes = () => {
     return (
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
       </Routes>
     );
   };

Explication :

• Le composant BrowserRouter enveloppe l'intégralité de l'application pour activer le routage.
• Le composant Link est utilisé pour créer des liens de navigation qui ne déclenchent pas de rechargement de page.
• Le composant Routes contient toutes les routes et chaque élément Route mappe un chemin d'URL à un composant (par exemple, Accueil, À propos ou Contact).
• Cliquer sur le lien mettra à jour l'URL et affichera le composant correspondant.

---

Routage imbriqué

React Router prend également en charge les routes imbriquées, vous permettant de définir des routes au sein d'autres routes.

   <Route path="/" element={<Home />} />

Explication :

• La route /dashboard a des routes imbriquées : /dashboard/profile et /dashboard/settings.
• En utilisant le caractère générique * dans la route parent (path="dashboard/*"), React Router sait restituer les routes enfants à l'intérieur du composant Dashboard.

---

Redirection avec Naviguer

Vous pouvez diriger les utilisateurs par programmation vers différents itinéraires à l'aide du composant Navigate ou du hook useNavigate.

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

   const Navigation = () => {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   };

Explication :

• Le composant Navigate redirigera automatiquement l'utilisateur vers la route /about une fois rendu.

---

Paramètres d'itinéraire

Vous pouvez définir des itinéraires dynamiques en incluant des paramètres d'itinéraire, qui peuvent être utilisés pour transmettre des valeurs dans l'URL.

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

   const Login = () => {
     const navigate = useNavigate();

     const handleLogin = () => {
       // Perform login logic
       navigate('/dashboard');
     };

     return (
       <button onClick={handleLogin}>Login</button>
     );
   };

Explication :

• Le :userId dans le chemin de la route est un paramètre de route.
• Le hook useParams est utilisé dans le composant UserProfile pour extraire la valeur de userId de l'URL et l'afficher sur la page.

---

Conclusion

React Router rend la navigation entre les vues dans une application React facile et efficace. Avec ses composants tels que BrowserRouter, Route, Link et des hooks comme useNavigate, vous pouvez créer des applications dynamiques d'une seule page avec une logique de routage complexe. En comprenant les bases de React Router, y compris la gestion des itinéraires, des itinéraires imbriqués et des paramètres d'itinéraire, vous pouvez facilement gérer la navigation dans vos applications 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!