【React 學習筆記 EP.17】巢狀路由

什麼是巢狀路由？

巢狀路由就是在一個路由裡面，再放入子路由。想像你打開「設定」頁面，左邊選單不變，右邊內容根據你點的選項切換，外層不動，只有內部區塊在變化，這就是巢狀路由。

巢狀路由概念

1. 父路由：外層的頁面，負責提供共用的版面結構，例如導覽列或側邊欄。
2. 子路由：嵌在父路由裡面的頁面，會根據網址變化替換顯示的內容。
3. <Outlet />：Router 提供的特殊元件，放在父路由的元件裡，用來標記「子路由的內容要顯示在這裡」。

巢狀路由語法

1. <Route path="dashboard">：定義父路由的路徑。
2. element={<Dashboard />}：指定父路由對應的元件。
3. 子 <Route>：寫在父 <Route> 標籤之間，定義子路由。
4. path="profile"：子路由路徑，網址自動組成 /dashboard/profile。
5. index：預設子路由，當使用者只進入 /dashboard 時顯示的內容。
6. <Outlet />：放在父元件中，渲染匹配到的子路由元件。

import { BrowserRouter, Routes, Route, Outlet, Link } from "react-router-dom";

// 提供共用版面與導覽
function Dashboard() {
  return (
    <div>
      <nav>
        <Link to="profile">個人資料</Link> | {/* 連結到子路由 */}
        <Link to="settings">設定</Link>
      </nav>
      <Outlet /> {/* 子路由的內容會顯示在這裡 */}
    </div>
  );
}

// Route 包 Route 就是巢狀路由
export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="dashboard" element={<Dashboard />}> {/* 父路由 */}
          <Route index element={<p>歡迎來到儀表板</p>} /> {/* 預設子路由 */}
          <Route path="profile" element={<p>這是個人資料頁</p>} /> {/* 子路由 */}
          <Route path="settings" element={<p>這是設定頁</p>} /> {/* 子路由 */}
        </Route>
      </Routes>
    </BrowserRouter>
  );
}