在前兩篇文章有介紹到 React Route（路由） 的概念與實作，除了一般路由之外，Nested Routes（巢狀路由）可以利用層級的結構來管理頁面，這篇文章主要就是介紹路由的延伸 － Nested Routes（巢狀路由）。

什麼是 Nested Routes（巢狀路由）

Nested Routes（巢狀路由）就像「一個頁面裡再放入子頁面」，讓路由之間呈現父子層級結構：

• 父路由負責共用佈局 (Layout)
• 子路由負責各自的內容顯示
  如此一來，就能達到父頁面裡顯示不同子頁面的效果。

範例情境：
/help → 顯示幫助主頁
/help/faq → 顯示幫助主頁 + 常見問題
/help/contact → 顯示幫助主頁 + 聯絡我們

範例：

建立Layout元件

HelpLayout.js

import { NavLink, Outlet } from "react-router-dom"

export default function HelpLayout() {
  return (
    <div className="help-layout">

      <h2>Website Help</h2>
      <p>有什麼需要幫助的？</p>

      <nav>
        <NavLink to="faq">常見問題</NavLink>
        <NavLink to="contact">聯絡我們</NavLink>
      </nav>

      <Outlet />

    </div>
  )
}

定義巢狀路由

App.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HelpLayout from "./HelpLayout";
import Faq from "./Faq";
import Contact from "./Contact";

function App() {
  return (
    <Router>
        <div className="content">
          <Routes>
            <Route path="help" element={<HelpLayout />}>
              <Route path="faq" element={<Faq />} />
              <Route path="contact" element={<Contact/>}/>
            </Route>
          </Routes>
        </div>
    </Router>
  );
}

export default App;

  );
}

Faq.js

export default function Faq() {...}

Contact.js

export default function Contact() {...}

瀏覽器執行畫面

Layout佈局元件的用途

• 統一頁面結構：例如在不同頁面時都會出現的：標頭 (Header)、側邊攔 (Sidebar)、頁腳 (Footer)
• 結構更清晰：父路由負責固定框架，子路由只需要負責自己的內容就好
• 集中管理：如果要修改共用的部分，只需要在 Layout 中調整，這樣一來，所有的子頁面就會套用這些設定
  Layout 本質上就是一個「父元件」，通常會搭配 <Outlet /> 一起使用，負責放置共用的 UI 與框架。

<Outlet />的功能

是 React Router v6 中專門用在巢狀路由 (Nested Routes) 的一個特殊元件，
可以把它想像成一個插槽，子路由的內容會在這裡被渲染出來。

Nested Routes（巢狀路由）結構圖

總結

• 巢狀路由讓父子頁面形成結構化的組織
• 父路由透過 Layout 提供共用框架
• 子路由的內容會顯示在 <Outlet /> 中
• 讓程式碼可讀性和維護性更高