React Router Declarative → Data → Framework 三种模式如何选

2025年9月8日 09:12

日本-平等院.jpg

2025 年如果你进入 react-router 的网站第一个难点就是如何选择模式 Picking a Mode。本文将帮助大家理清楚三种模式的区别和如何选择。

内容翻译自 React Router v7: The Evolution React Needed

dev.to/kevinccbsg/…

如果你正在阅读这篇文章，十有八九正在使用或学习 React。你肯定也听说过 react-router——多年来在 React 世界里最流行的路由库。

但你可能还不知道，最新的 React Router 发生了巨大变化。它直接吸收了 Remix 的核心思想：loaders、actions、ErrorBoundary、SSR 支持等等。

Remix？没错。Remix 一直基于 React Router 构建，而在 v7 中，两者彻底统一——现在你可以直接在 React Router 里使用这套架构，而无需引入一个完整框架。

React Router v7 带来了什么？

最简单的方法就是看看它的 三种使用模式，分别对应不同复杂度和场景：

声明式模式（Declarative Mode）
数据模式（Data Mode）
框架模式（Framework Mode）

各个模式所提供的功能是累加的，因此从 Declarative 到 Data 再到 Framework，只是以牺牲架构控制权为代价，逐步增加更多功能。所以，请根据你对架构控制的需求，以及希望从 React Router 获得的帮助程度，来选择合适的模式。

下面逐一说明。

1. 声明式模式（Declarative Mode）

这就是你熟悉的老方式：用 <Routes> 和 <Route> 写路由，再用 useNavigate、useParams 等钩子。

<Routes>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />

  <Route element={<AuthLayout />}>
    <Route path="login" element={<Login />} />
    <Route path="register" element={<Register />} />
  </Route>

  <Route path="concerts">
    <Route index element={<ConcertsHome />} />
    <Route path=":city" element={<City />} />
    <Route path="trending" element={<Trending />} />
  </Route>
</Routes>

适合只想做 SPA，用 Vite/Webpack 自己搭，状态管理交给 Zustand、Redux、React-Query，且不需要 SSR 的项目。

2. 数据模式（Data Mode）

这是 React Router v7 真正的亮点。用路由配置对象而非组件来定义路由，每条路由可声明：

loader：在渲染前取数据
action：处理表单或变更

import { createBrowserRouter, RouterProvider, Form, useLoaderData } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/items',
    loader,
    action,
    Component: Items,
  },
]);

async function loader() {
  const items = await fakeDb.getItems();
  return { items };
}

async function action({ request }) {
  const data = await request.formData();
  await fakeDb.addItem({ title: data.get('title') });
  return { ok: true };
}

function Items() {
  const { items } = useLoaderData();
  return (
    <div>
      <TodoList items={items} />
      <Form method="post">
        <input name="title" />
        <button type="submit">Crear</button>
      </Form>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router} />
);

适用于复杂 SPA，想摆脱 useEffect 地狱，集中管理数据流；仍可部署到 Vercel、Netlify、Firebase 等。

3. 框架模式（Framework Mode）

把 React Router 变成真正的全栈框架，带 SSR。用 CLI 从零开始，适合需要 SEO 或首屏超快的应用。

特点

与数据模式共享 loader/action 语法
最佳 TypeScript 支持
需提前决定部署目标（Node、Cloudflare、Vercel…）
并非所有第三方库都兼容 SSR
推荐 Tailwind 或可 SSR 的样式方案

如果应用不对外公开、也不需要 SEO，建议仍用声明式或数据模式，避免过度复杂。

那么，值得升级吗？

许多框架把前端变得越来越重，React Router v7 提供了清晰、灵活的路径：

只要路由 → 声明式模式
想管好数据/表单 → 数据模式
需要 SSR/静态渲染/智能代码分割等高级功能；或如果你之前用过 Remix、Astro、Next.js 这类框架 → 框架模式（当然框架模式也支持 SPA）

阅读视图