為什麼需要嵌套路由？

在開發中，應用程式常常需要更加複雜的路由結構，例如 /user/profile 和 /user/settings，為了實現這種層次化路由結構，我們可以使用嵌套路由。

實現嵌套路由

嵌套路由的實現方法是在 Route 元件內部嵌套更多的 Route 元件，從而建立出路由的層次結構。

import { BrowserRouter, Routes, Route } from "react-router-dom";
import UserLayout from "./pages/UserLayout";
import Profile from "./pages/Profile";
import Settings from "./pages/Settings";

function App() {
  return (
    <BrowserRouter>
	  <Routes>
	    // 此時的路由 => /user
		<Route path="user" element={<UserLayout />}>
		  // 此時的路由 => /user/profile
		  <Route path="profile" element={<Profile />} />
          // 此時的路由 => /user/settings
		  <Route path="settings" element={<Settings />} />
		</Route>
	  </Routes>
    </BrowserRouter>
  )
}

在上面的範例中，我們使用嵌套的 Route 元件實現了多層級的路由結構，使我們可以輕鬆地前往 /user/profile 和 /user/settings。

嵌套路由的 element 顯示

當我們希望 UserLayout 元件顯示其內容時，我們不再使用 Children Prop，而是使用 Outlet 元件來顯示 element 屬性傳遞的 JSX 或是元件。

function UserLayout() {
  return (
    <div className="user">
	  // 此時 Outlet 元件將會顯示 Profile 或是 Settings 的頁面元件
	  <Outlet />
	</div>
  )
}

通過使用 Outlet 元件，我們可以在 UserLayout 中顯示由嵌套路由定義的內容。

預設路由的內容

有些時候，我們希望 /user 路由本身也具有自己的內容。在這種情況下，我們可以添加一個具有 index 屬性的 Route 元件：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import User from "./pages/User";
import Profile from "./pages/Profile";
import Settings from "./pages/Settings";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="user" element={<Layout />}>
		  // 當路由為 /user 時，顯示 User 元件
		  <Route index element={<User />} />
		  // 當路由為 /user/profile 時，顯示 Profile 元件
		  <Route path="profile" element={<Profile />} />
		  // 當路由為 /user/settings 時，顯示 Settings 元件
		  <Route path="settings" element={<Settings />} />
		</Route>
      </Routes>
    </BrowserRouter>
  )
}

在上面的範例中，我們使用 index 屬性定義了 /user 路由的預設內容，這樣當使用者前往 /user 時，將顯示 User 元件的內容。

結語

通過適當的使用嵌套路由，我們可以實現多層次的路由結構，同時保持應用程式的結構性。