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 打包器和开发服务器集成
热模块替换
代码分割
具有类型安全性的路由约定
文件系统或基于配置的路由
具有类型安全性的数据加载
具有类型安全性的 Actions
在 Actions 后自动重新验证页面数据
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 为路由组件提供数据

// 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 };
}

组件在其配置的 URL 中从 routes.ts 渲染，并将 loader 数据作为 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>
  );
}

Actions 可以更新数据并触发页面上所有数据的重新验证，以便您的 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 作为框架。