选择一种模式

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，它具有类型安全的参数、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 用的，不过您也可以随便看看