In React können Sie mit verschachtelten Routen Ihre Routen hierarchisch strukturieren, wobei eine Route in einer anderen verschachtelt ist. Dies ist nützlich, wenn Sie komplexe Benutzeroberflächen erstellen, bei denen bestimmte Komponenten oder Seiten über verschiedene Routen hinweg gemeinsam genutzt werden.

Um verschachtelte Routen zu erstellen, können Sie React Router verwenden, eine beliebte Bibliothek zur Handhabung des Routings in React-Anwendungen.

Beispiel mit React Router (v6):

1. React Router installieren:

   npm install react-router-dom

1. Verschachtelte Routen einrichten:

   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;

Kernpunkte:

• Outlet: Hier werden die verschachtelten Routenkomponenten gerendert.
• Route path="/" element={}: Die Hauptroute mit verschachtelten untergeordneten Elementen.
• Verschachtelte Route: Das }> enthält weitere verschachtelte Routen für „Statistiken“ und „Einstellungen.“

Diese Struktur ermöglicht Ihnen ein gemeinsames Layout (wie ein Dashboard-Menü) und das dynamische Laden bestimmter Abschnitte wie Statistiken oder Einstellungen basierend auf den verschachtelten Routen.