Comprendre les routes imbriquées dans React : un guide complet

Dans React, les routes imbriquées vous permettent de structurer vos routes de manière hiérarchique, où une route est imbriquée dans une autre. Ceci est utile lors de la création d'interfaces utilisateur complexes dans lesquelles certains composants ou pages sont partagés sur différents itinéraires.

Pour créer des routes imbriquées, vous pouvez utiliser React Router, une bibliothèque populaire pour gérer le routage dans les applications React.

Exemple utilisant React Router (v6) :

1. Installer React Router :

   npm install react-router-dom

1. Configurer des itinéraires imbriqués :

   import { BrowserRouter as Router, Routes, Route, Outlet, Link } from 'react-router-dom';

   // Layout Component with Nested Routes
   function Layout() {
     return (
       <div>
         <nav>
           <ul>
             <li>
               <Link to="/">Home</Link>
             </li>
             <li>
               <Link to="/about">About</Link>
             </li>
             <li>
               <Link to="/dashboard">Dashboard</Link>
             </li>
           </ul>
         </nav>

         {/* This is where nested routes will be rendered */}
         <Outlet />
       </div>
     );
   }

   // Components for each route
   function Home() {
     return <h2>Home Page</h2>;
   }

   function About() {
     return <h2>About Page</h2>;
   }

   function Dashboard() {
     return (
       <div>
         <h2>Dashboard</h2>
         <nav>
           <ul>
             <li>
               <Link to="stats">Stats</Link>
             </li>
             <li>
               <Link to="settings">Settings</Link>
             </li>
           </ul>
         </nav>

         {/* Nested routes inside Dashboard */}
         <Outlet />
       </div>
     );
   }

   function Stats() {
     return <h2>Dashboard Stats</h2>;
   }

   function Settings() {
     return <h2>Dashboard Settings</h2>;
   }

   // App Component with Routes
   function App() {
     return (
       <Router>
         <Routes>
           <Route path="/" element={<Layout />}>
             <Route index element={<Home />} />
             <Route path="about" element={<About />} />
             <Route path="dashboard" element={<Dashboard />}>
               <Route path="stats" element={<Stats />} />
               <Route path="settings" element={<Settings />} />
             </Route>
           </Route>
         </Routes>
       </Router>
     );
   }

   export default App;

Points clés :

• Outlet : c'est ici que les composants de route imbriqués sont rendus.
• Route path="/" element={} : L'itinéraire principal avec les enfants imbriqués.
• Route imbriquée : L'élément }> contient d'autres itinéraires imbriqués pour les « statistiques » et les « paramètres ».

Cette structure vous permet d'avoir une présentation commune (comme un menu de tableau de bord) et de charger dynamiquement des sections spécifiques comme des statistiques ou des paramètres en fonction des itinéraires imbriqués.

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!