Verschachtelte Routen in React verstehen: Ein umfassender Leitfaden

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 (
       <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;

Wichtige Punkte:

• Ausgang: Hier werden die verschachtelten Routenkomponenten gerendert.
• Route path="/" element={}: Die Hauptroute mit verschachtelten untergeordneten Elementen.
• Verschachtelte Route: Die }> enthält weitere verschachtelte Routen für „Statistik“ 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.

Das obige ist der detaillierte Inhalt vonVerschachtelte Routen in React verstehen: Ein umfassender Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!