掌握 React Router 中的嵌套路由：建立動態佈局

React Router 中的巢狀路由

React Router 中的

巢狀路由 可讓您在其他路由中定義路由，從而實現複雜的佈局並能夠根據路徑顯示不同的元件。此功能對於建立具有自己的子路由部分的應用程式特別有用，例如儀表板、設定檔或管理面板。

巢狀路由有助於建立分層 URL，其中每個路由都可以具有在其父元件內呈現特定內容的子路由。

---

如何建立巢狀路由

要在 React Router 中設定巢狀路由，您可以使用 Routes 和 Route 元件在父路由中定義路由。

實作巢狀路由的步驟

1. 父路由：定義父元件的路由。
2. 子路由：在父元件內，建立一個附加路由元件的路由元件來處理子路由。
3. 渲染子元件：確保父元件包含>元件，充當渲染子元件的佔位符。

---

巢狀路由的基本範例

這是一個基本範例，展示如何定義父路由和巢狀路由：

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

// Parent Component
const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile">Profile</Link></li>
          <li><Link to="settings">Settings</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

// Child Components
const Profile = () => <h3>Profile Page</h3>;
const Settings = () => <h3>Settings Page</h3>;

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Parent Route */}
        <Route path="dashboard" element={<Dashboard />}>
          {/* Nested Routes */}
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

說明：

• 儀表板元件是父路由，它呈現導航連結和>。成分。 >用作將渲染子路由元件的佔位符。
• 設定檔和設定元件是儀表板內的巢狀路由。
• Link 元件用於導航，當點擊時，它們將更新 URL 並呈現相應的巢狀元件（例如 /dashboard/profile 或 /dashboard/settings）。
• 儀表板內的路由和路由元件定義巢狀路由，確保當 URL 符合 /dashboard/profile 或 /dashboard/settings 時，呈現適當的元件。

---

帶路徑參數的巢狀路由

您也可以使用動態參數建立巢狀路由。

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

// Parent Component
const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile">Profile</Link></li>
          <li><Link to="settings">Settings</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

// Child Components
const Profile = () => <h3>Profile Page</h3>;
const Settings = () => <h3>Settings Page</h3>;

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Parent Route */}
        <Route path="dashboard" element={<Dashboard />}>
          {/* Nested Routes */}
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

說明：

• Profile 元件從 URL (/dashboard/profile/:id) 接收 動態參數。
• useParams() 鉤子用於存取動態參數，在本例中為 id.
• 父路由 /dashboard 對於每個設定檔都有子路由，當 URL 發生變化時（例如 /dashboard/profile/1），Profile 元件將顯示使用者的 ID。

---

處理預設巢狀路由

React Router 提供了一種處理預設巢狀路由的方法。如果沒有符合到特定的子路由，則可以顯示預設元件。

import React from 'react';
import { BrowserRouter, Routes, Route, Link, Outlet, useParams } from 'react-router-dom';

const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile/1">Profile 1</Link></li>
          <li><Link to="profile/2">Profile 2</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

const Profile = () => {
  const { id } = useParams();  // Retrieve the 'id' parameter from the URL
  return <h3>Profile Page for User: {id}</h3>;
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Parent Route */}
        <Route path="dashboard" element={<Dashboard />}>
          {/* Nested Route with Path Parameter */}
          <Route path="profile/:id" element={<Profile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

說明：

• 索引路由是一種特殊的路由，用來定義當父路由符合但沒有提供子路徑時的預設元件。
• 在這種情況下，/dashboard 將預設渲染 DashboardHome 元件，但如果存取 /dashboard/profile 或 /dashboard/settings，則會顯示對應的元件。

---

結論

React Router 中的巢狀路由是建構具有分層結構的複雜 UI 的基本功能。它們允許您將應用程式分解為更小的、可管理的元件，同時仍保持導航的乾淨和動態。透過使用>元件中，您可以在父元件內渲染子路由，並且可以使用動態參數、預設路由和嵌套 URL 結構進一步自訂路由。

---

以上是掌握 React Router 中的嵌套路由：建立動態佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！