嵌套路由

在 React 应用中，路由是构建单页面应用（SPA）的核心功能之一。嵌套路由（Nested Routes）是一种允许你在一个路由组件内部定义子路由的技术。通过嵌套路由，你可以构建更复杂的页面结构，例如在父页面中嵌套子页面或组件。

什么是嵌套路由？

嵌套路由是指在一个路由组件内部定义其他路由。这些子路由可以继承父路由的路径，并在父路由的组件中渲染。这种方式非常适合构建具有层次结构的页面，例如仪表盘、设置页面或多步骤表单。

为什么使用嵌套路由？

模块化：将路由逻辑分解为更小的部分，便于维护。
动态渲染：根据 URL 动态渲染子组件，而无需重新加载整个页面。
代码复用：父路由的布局和逻辑可以被子路由复用。

如何实现嵌套路由？

在 React Router v6 中，嵌套路由的实现非常简单。你可以使用 <Outlet /> 组件来渲染子路由的内容。

基本示例

假设我们有一个简单的应用，包含一个仪表盘页面，仪表盘页面中又包含两个子页面：/dashboard/profile 和 /dashboard/settings。

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

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <Link to="profile">Profile</Link>
        <Link to="settings">Settings</Link>
      </nav>
      <Outlet />
    </div>
  );
}

function Profile() {
  return <h2>Profile Page</h2>;
}

function Settings() {
  return <h2>Settings Page</h2>;
}

在这个例子中，<Dashboard /> 组件是父路由，它包含两个子路由：profile 和 settings。<Outlet /> 组件用于渲染子路由的内容。

嵌套路由的路径

嵌套路由的路径是相对于父路由的路径。例如，/dashboard/profile 的完整路径是父路由 /dashboard 加上子路由 profile。

提示

你可以使用相对路径来定义嵌套路由，这样可以避免硬编码父路由的路径。

实际应用场景

嵌套路由在以下场景中非常有用：

仪表盘页面：在仪表盘页面中，你可能需要显示不同的子页面，例如用户信息、设置、通知等。
多步骤表单：在多步骤表单中，每个步骤可以是一个子路由，用户可以在不同的步骤之间导航。
动态布局：在动态布局中，父路由可以定义布局结构，而子路由可以动态渲染内容。

示例：多步骤表单

假设我们有一个多步骤表单，包含三个步骤：/form/step1、/form/step2 和 /form/step3。

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/form" element={<FormLayout />}>
          <Route path="step1" element={<Step1 />} />
          <Route path="step2" element={<Step2 />} />
          <Route path="step3" element={<Step3 />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function FormLayout() {
  return (
    <div>
      <h1>Multi-Step Form</h1>
      <nav>
        <Link to="step1">Step 1</Link>
        <Link to="step2">Step 2</Link>
        <Link to="step3">Step 3</Link>
      </nav>
      <Outlet />
    </div>
  );
}

function Step1() {
  return <h2>Step 1: Personal Information</h2>;
}

function Step2() {
  return <h2>Step 2: Address Information</h2>;
}

function Step3() {
  return <h2>Step 3: Confirmation</h2>;
}

在这个例子中，<FormLayout /> 是父路由，它定义了表单的布局结构，而每个步骤（Step1、Step2、Step3）是子路由。

总结

嵌套路由是 React Router 中非常强大的功能，它允许你构建复杂的页面结构，同时保持代码的模块化和可维护性。通过使用 <Outlet /> 组件，你可以轻松地在父路由中渲染子路由的内容。

备注

如果你需要更复杂的路由逻辑，例如动态路由或权限控制，React Router 也提供了相应的 API 来满足这些需求。

附加资源

练习

创建一个包含嵌套路由的 React 应用，模拟一个博客系统。父路由是 /blog，子路由是 /blog/:postId。
尝试在一个嵌套路由中实现权限控制，例如只有登录用户才能访问某些子路由。

通过练习，你将更好地理解嵌套路由的工作原理，并能够在实际项目中应用它。

什么是嵌套路由？​

为什么使用嵌套路由？​

如何实现嵌套路由？​

基本示例​

嵌套路由的路径​

实际应用场景​

示例：多步骤表单​

总结​

附加资源​

练习​