掌握 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中文网其他相关文章！