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 (
       

         

         {/* This is where nested routes will be rendered */}
         
     );
   }

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

   function About() {
     return 
About Page
;
   }

   function Dashboard() {
     return (
       

         
Dashboard
         

         {/* Nested routes inside Dashboard */}
         
     );
   }

   function Stats() {
     return 
Dashboard Stats
;
   }

   function Settings() {
     return 
Dashboard Settings
;
   }

   // App Component with Routes
   function App() {
     return (
       }>
             } />
             } />
             }>
               } />
               } />
             
           
         
     );
   }

   export default App;

Points clés :

• Outlet : c'est ici que les composants de route imbriqués sont rendus.
• Route path="/" element={} : la route principale avec les enfants imbriqués.
• Route imbriquée : le }> contient d'autres routes imbriquées 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 basés sur les itinéraires imbriqués.