2025年10月23日 web

在 React Router 中实现嵌套路由与并行数据获取

利用 React Router v6+ 的 loaders 和 actions 构建可扩展 SPA，支持嵌套路由、并行数据加载和布局持久性。

内容加载中...

在现代 React 单页应用（SPA）开发中，路由管理是构建复杂用户界面的核心。React Router 作为 React 生态中最受欢迎的路由库，其 v6+ 版本引入了声明式路由和数据集成机制，显著降低了样板代码，帮助开发者实现高效、可扩展的架构。本文聚焦于嵌套路由的实现、并行数据获取、基于 action 的数据突变以及布局持久性，旨在提供一套可操作的工程实践指南。通过这些特性，开发者可以避免传统的 useEffect 瀑布流问题，确保应用在规模化时保持高性能。

嵌套路由的基础实现

嵌套路由是构建多层级 UI 的关键，例如仪表盘页面下包含多个子视图，如消息列表和任务管理。React Router 通过 children 属性和 Outlet 组件实现这一功能。

首先，使用 createBrowserRouter 创建路由配置。假设我们有一个根布局组件 Layout，它包含头部和侧边栏，这些元素在子路由切换时保持不变。

import { createBrowserRouter, Outlet } from 'react-router-dom';

const Layout = () => (
  <div>
    <header>应用头部</header>
    <nav>侧边栏导航</nav>
    <main>
      <Outlet />  // 子路由渲染位置
    </main>
  </div>
);

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: 'dashboard',
        element: <Dashboard />,
        children: [
          {
            path: 'messages',
            element: <Messages />,
          },
          {
            path: 'tasks',
            element: <Tasks />,
          },
        ],
      },
    ],
  },
]);

在这里，Layout 作为父路由的 element，Outlet 充当占位符。访问 /dashboard/messages 时，Layout 持久存在，Messages 组件渲染在 Outlet 中。这种设计确保布局状态（如侧边栏展开状态）在导航间保持一致，避免不必要的重渲染。

为了支持动态参数，如用户 ID，可以在路径中使用 :id，例如 path: 'user/:id'。在组件中使用 useParams() 获取参数，实现个性化内容渲染。

并行数据获取：Loaders 的应用

传统 SPA 中，数据加载往往依赖 useEffect，导致串行请求和加载延迟。React Router 的 loader 函数将数据获取提升到路由层面，支持并行执行。

loader 是一个异步函数，在路由匹配时自动调用，返回 Promise。多个嵌套路由的 loader 可以并行运行，减少总等待时间。

例如，在 Dashboard 路由中，为 messages 和 tasks 子路由定义 loader：

const messagesLoader = async ({ params }) => {
  const response = await fetch(`/api/messages?userId=${params.userId}`);
  if (!response.ok) throw new Error('加载失败');
  return response.json();
};

const tasksLoader = async ({ params }) => {
  const response = await fetch(`/api/tasks?userId=${params.userId}`);
  return response.json();
};

const router = createBrowserRouter([
  // ...
  {
    path: 'dashboard',
    element: <Dashboard />,
    loader: async ({ params }) => {
      // 父级 loader，可并行子级
      return { user: await fetchUser(params.userId) };
    },
    children: [
      {
        path: 'messages',
        loader: messagesLoader,
        element: <Messages />,
      },
      {
        path: 'tasks',
        loader: tasksLoader,
        element: <Tasks />,
      },
    ],
  },
]);

在 Messages 组件中，使用 useLoaderData() 直接访问数据：

import { useLoaderData } from 'react-router-dom';

const Messages = () => {
  const messages = useLoaderData();
  return (
    <ul>
      {messages.map(msg => <li key={msg.id}>{msg.content}</li>)}
    </ul>
  );
};

这种方式避免了组件渲染后的额外请求。官方文档指出，React Router 会自动优化静态 loader 与懒加载模块的并行执行，确保数据和组件加载同步进行。

对于可落地参数，建议设置 loader 的超时阈值：使用 AbortController 控制 fetch 的 signal，超时设为 5-10 秒。监控点包括 loader 执行时间（目标 < 200ms）和错误率（< 1%）。如果数据量大，可结合 React.lazy() 实现路由懒加载，进一步代码分割。

基于 Action 的数据突变

数据突变如表单提交或删除操作，使用 action 函数处理。action 与 loader 类似，但针对 POST/PUT/DELETE 请求，支持重定向。

使用组件触发 action，无需 onSubmit 事件处理：

const deleteAction = async ({ request, params }) => {
  const formData = await request.formData();
  const id = formData.get('id');
  await fetch(`/api/messages/${id}`, { method: 'DELETE' });
  return redirect(`/dashboard/messages`);  // 成功后重定向
};

const router = createBrowserRouter([
  // ...
  {
    path: 'messages',
    action: deleteAction,
    element: <Messages />,
  },
]);

在 Messages 组件中：

const Messages = () => {
  const messages = useLoaderData();
  const actionData = useActionData();  // 获取 action 结果
  const navigation = useNavigation();  // 提交状态

  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>
          {msg.content}
          <Form method="post">
            <input type="hidden" name="id" value={msg.id} />
            <button type="submit" disabled={navigation.state === 'submitting'}>
              删除
            </button>
          </Form>
        </div>
      ))}
      {actionData?.error && <p>操作失败</p>}
    </div>
  );
};

action 的优势在于乐观更新支持：提交前可临时更新 UI，使用 useNavigation() 监控状态。参数建议：action 响应时间 < 500ms，重试机制 3 次，结合 useFetcher() 处理非导航突变。

布局持久性和错误处理

布局持久性通过 Outlet 实现，如上例所示。父组件状态（如 Redux store 或 Context）在子路由切换时保持，避免闪烁。

为健壮性，添加 errorElement 处理 loader/action 错误：

const ErrorBoundary = ({ error }) => (
  <div>
    <h2>出错了</h2>
    <p>{error.message}</p>
    <Link to="/">返回首页</Link>
  </div>
);

const router = createBrowserRouter([
  {
    path: 'dashboard',
    element: <Dashboard />,
    errorElement: <ErrorBoundary />,
    // ...
  },
]);

使用 useRouteError() 在组件内捕获错误。监控包括错误日志上报和回滚策略：失败时 fallback 到缓存数据。

最佳实践与清单

构建可扩展 SPA 的清单：

路由配置：使用 createRoutesFromElements 声明式定义，避免硬编码。
数据参数：loader/action 中验证输入，参数化查询（如 ?limit=20&page=1）。
性能阈值：并行 loader 总数 < 5，懒加载 chunk 大小 < 100KB。
安全：loader 中权限检查，重定向未授权用户。
测试：使用 @testing-library/react 模拟 loader/action。
回滚：集成 TanStack Query 作为缓存层，失败时使用 stale 数据。

这些实践确保应用在高并发下稳定。React Router 的设计理念是“路由即数据”，通过集成 loaders 和 actions，开发者无需额外库即可实现全栈式 SPA。

资料来源：React Router 官方文档（https://reactrouter.com/）和 GitHub 仓库（https://github.com/remix-run/react-router）。

（字数：1256）