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

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 等钩子。

tsx 复制代码

<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：处理表单或变更

tsx 复制代码

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）