了解 React 中的嵌套路由：綜合指南

在 React 中，巢狀路由可讓您分層建置路由，其中​​一個路由會嵌套在另一個路由中。當建立複雜的 UI（其中某些元件或頁面在不同的路由之間共用）時，這非常有用。

要建立巢狀路由，您可以使用 React Router，這是一個用於在 React 應用程式中處理路由的流行函式庫。

使用 React Router (v6) 的範例：

1. 安裝 React Router：

   npm install react-router-dom

1. 設定巢狀路由：

   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;

要點：

• Outlet：這是渲染巢狀路由元件的地方。
• Route path="/" element={}：具有巢狀子層級的主路由。
• 巢狀路由：}>包含「統計」與「設定」的進一步嵌套路由。

此結構可讓您擁有通用佈局（如儀表板選單）並根據嵌套路由動態載入特定部分，例如統計資料或設定。

以上是了解 React 中的嵌套路由：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！