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

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!