选择模式

React Router 是一个用于 React 的多策略路由库。在你的应用中有三种主要的使用方式，或者说“模式”。在整个文档中，你会看到这些图标，它们指示了内容适用于哪种模式

• 框架
• 数据
• 声明式

每种模式提供的功能是叠加的，因此从声明式模式转向数据模式再转向框架模式，只需增加更多功能，但会牺牲一些架构控制。因此，根据你想要 React Router 提供多少控制或帮助来选择你的模式。

你使用的模式取决于你使用的是哪个“顶层”路由 API。

声明式

声明式模式启用了基本的路由功能，例如将 URL 匹配到组件、在应用中导航以及使用 <Link>、useNavigate 和 useLocation 等 API 提供活动状态。

import { BrowserRouter } from "react-router";

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

数据

通过将路由配置移到 React 渲染之外，数据模式增加了数据加载、操作、挂起状态等功能，通过 loader、action 和 useFetcher 等 API 实现。

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router";

let router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    loader: loadRootData,
  },
]);

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

框架

框架模式通过 Vite 插件包装了数据模式，以提供完整的 React Router 体验，包括：

• 类型安全的 href
• 类型安全的路由模块 API
• 智能代码分割
• SPA、SSR 和静态渲染策略
• 等等

import { index, route } from "@react-router/dev/routes";

export default [
  index("./home.tsx"),
  route("products/:pid", "./product.tsx"),
];

然后，你将能够访问路由模块 API，该 API 具备类型安全的参数、loaderData、代码分割、SPA/SSR/SSG 策略等功能。

import { Route } from "+./types/product.tsx";

export async function loader({ params }: Route.LoaderArgs) {
  let product = await getProduct(params.pid);
  return { product };
}

export default function Product({
  loaderData,
}: Route.ComponentProps) {
  return <div>{loaderData.product.name}</div>;
}

决策建议

每种模式都支持任何架构和部署目标，因此问题不在于你是否想要 SSR、SPA 等，而在于你想要自己做多少。

如果你符合以下条件，请使用框架模式：

• 经验尚浅，没有特定偏好
• 正在考虑 Next.js, Solid Start, SvelteKit, Astro, TanStack Start 等框架并想进行比较
• 只是想使用 React 构建一些东西
• 可能需要服务器渲染，也可能不需要
• 来自 Remix（React Router v7 是 Remix v2 之后的“下一版本”）
• 从 Next.js 迁移

→ 框架模式入门.

如果你符合以下条件，请使用数据模式：

• 需要数据功能，但也想控制打包、数据和服务器抽象
• 在 v6.4 中开始使用数据路由并对此感到满意

→ 数据模式入门.

如果你符合以下条件，请使用声明式模式：

• 想尽可能简单地使用 React Router
• 来自 v6 并对 <BrowserRouter> 感到满意
• 你的数据层要么跳过挂起状态（例如本地优先、后台数据复制/同步），要么有自己的抽象来处理它们
• 来自 Create React App（不过你可能想考虑框架模式）

→ 声明式模式入门.

API + 模式可用性表

这主要面向 LLM，但你也可以看看。