React Router 首页

React Router 是一个适用于 React 的多策略路由器，弥合了 React 18 到 React 19 之间的差距。您可以最大限度地将其用作 React 框架，或者最小限度地将其用作库，并使用您自己的架构。

如果您已了解未来特性，则从 React Router v6 或 Remix 升级通常不会产生破坏性影响。

React Router 作为库

与之前的版本一样，React Router 仍然可以作为简单的声明式路由库使用。它的唯一作用是将 URL 与一组组件匹配，提供对 URL 数据的访问，并在应用程序中进行导航。

这种策略对于拥有自己的前端基础设施的“单页应用程序”以及寻求轻松升级的 v6 应用程序很受欢迎。

它特别适用于离线 + 同步架构，在这种架构中，待处理状态很少见，并且用户拥有长期运行的会话。可以将框架功能（如待处理状态、代码拆分、服务器渲染、SEO 和初始页面加载时间）替换为即时的本地优先交互。

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard" element={<Dashboard />}>
        <Route index element={<RecentActivity />} />
        <Route path="project/:id" element={<Project />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

开始使用 React Router 作为库。

React Router 作为框架

React Router 可以最大程度地用作您的 React 框架。在此设置中，您将使用 React Router CLI 和 Vite 捆绑器插件来构建完整的堆栈开发和部署架构。这使 React Router 能够提供大多数 Web 项目所需的大量功能，包括

Vite 捆绑器和开发服务器集成
热模块替换
代码拆分
具有类型安全的路由约定
基于文件系统或配置的路由
具有类型安全的数据加载
具有类型安全的操作
操作后自动重新验证页面数据
SSR、SPA 和静态渲染策略
用于待处理状态和乐观 UI 的 API
部署适配器

路由使用routes.ts进行配置，这使得 React Router 可以为您完成很多工作。例如，它会自动拆分每个路由的代码，为参数和数据提供类型安全，并在用户导航到该路由时自动加载数据并访问待处理状态。

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

export default [
  index("./home.tsx"),
  route("about", "./about.tsx"),

  layout("./auth/layout.tsx", [
    route("login", "./auth/login.tsx"),
    route("register", "./auth/register.tsx"),
  ]),

  ...prefix("concerts", [
    index("./concerts/home.tsx"),
    route(":city", "./concerts/city.tsx"),
    route(":city/:id", "./concerts/show.tsx")
    route("trending", "./concerts/trending.tsx"),
  ]),
] satisfies RouteConfig;

您将可以访问路由模块 API，大多数其他功能都是基于此构建的。

加载器为路由组件提供数据

// loaders provide data to components
export async function loader({ params }: Route.LoaderArgs) {
  const [show, isLiked] = await Promise.all([
    fakeDb.find("show", params.id),
    fakeIsLiked(params.city),
  ]);
  return { show, isLiked };
}

组件根据 routes.ts 中配置的 URL 渲染，并将加载器数据作为 prop 传递。

export default function Show({
  loaderData,
}: Route.ComponentProps) {
  const { show, isLiked } = loaderData;
  return (
    <div>
      <h1>{show.name}</h1>
      <p>{show.description}</p>

      <form method="post">
        <button
          type="submit"
          name="liked"
          value={isLiked ? 0 : 1}
        >
          {isLiked ? "Remove" : "Save"}
        </button>
      </form>
    </div>
  );
}

操作可以更新数据并触发页面上所有数据的重新验证，以便您的 UI 自动保持最新状态。

export async function action({
  request,
  params,
}: Route.LoaderArgs) {
  const formData = await request.formData();
  await fakeSetLikedShow(formData.get("liked"));
  return { ok: true };
}

路由模块还为 SEO、资产加载、错误边界等提供约定。

开始使用 React Router 作为框架。