React Router 中的嵌套路由

React Router 中的

嵌套路由 允許您在其他路由中定義路由，從而實(shí)現(xiàn)復(fù)雜的布局并能夠根據(jù)路徑顯示不同的組件。此功能對于構(gòu)建具有自己的子路由部分的應(yīng)用程序特別有用，例如儀表板、配置文件或管理面板。

嵌套路由有助于創(chuàng)建分層 URL，其中每個(gè)路由都可以具有在其父組件內(nèi)呈現(xiàn)特定內(nèi)容的子路由。

---

如何創(chuàng)建嵌套路由

要在 React Router 中設(shè)置嵌套路由，您可以使用 Routes 和 Route 組件在父路由中定義路由。

實(shí)現(xiàn)嵌套路由的步驟

1. 父路由：定義父組件的路由。
2. 子路由：在父組件內(nèi)，創(chuàng)建一個(gè)帶有附加路由組件的路由組件來處理子路由。
3. 渲染子組件：確保父組件包含>組件，充當(dāng)渲染子組件的占位符。

---

嵌套路由的基本示例

這是一個(gè)基本示例，展示了如何定義父路由和嵌套路由：

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;

說明：

• 儀表板組件是父路由，它呈現(xiàn)導(dǎo)航鏈接和>。成分。 >用作將渲染子路由組件的占位符。
• 配置文件和設(shè)置組件是儀表板內(nèi)的嵌套路由。
• Link 組件用于導(dǎo)航，單擊時(shí)，它們將更新 URL 并呈現(xiàn)相應(yīng)的嵌套組件（例如 /dashboard/profile 或 /dashboard/settings）。
• 儀表板內(nèi)的路由和路由組件定義嵌套路由，確保當(dāng) URL 匹配 /dashboard/profile 或 /dashboard/settings 時(shí)，呈現(xiàn)適當(dāng)?shù)慕M件。

---

帶路徑參數(shù)的嵌套路由

您還可以使用動態(tài)參數(shù)創(chuàng)建嵌套路由。

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) 接收 動態(tài)參數(shù)。
• useParams() 鉤子用于訪問動態(tài)參數(shù)，在本例中為 id.
• 父路由 /dashboard 對于每個(gè)配置文件都有子路由，當(dāng) URL 發(fā)生變化時(shí)（例如 /dashboard/profile/1），Profile 組件將顯示用戶的 ID。

---

處理默認(rèn)嵌套路由

React Router 提供了一種處理默認(rèn)嵌套路由的方法。如果沒有匹配到特定的子路由，則可以顯示默認(rèn)組件。

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;

說明：

• 索引路由是一種特殊的路由，用于定義當(dāng)父路由匹配但沒有提供子路徑時(shí)的默認(rèn)組件。
• 在這種情況下，/dashboard 將默認(rèn)渲染 DashboardHome 組件，但如果訪問 /dashboard/profile 或 /dashboard/settings，則會顯示相應(yīng)的組件。

---

結(jié)論

React Router 中的嵌套路由是構(gòu)建具有分層結(jié)構(gòu)的復(fù)雜 UI 的基本功能。它們允許您將應(yīng)用程序分解為更小的、可管理的組件，同時(shí)仍然保持導(dǎo)航的干凈和動態(tài)。通過使用>組件中，您可以在父組件內(nèi)渲染子路由，并且可以使用動態(tài)參數(shù)、默認(rèn)路由和嵌套 URL 結(jié)構(gòu)進(jìn)一步自定義路由。

---

以上是掌握 React Router 中的嵌套路由：構(gòu)建動態(tài)布局的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！