类型安全

如果您还没有这样做，请查看我们的在新项目中设置类型安全指南。

React Router 会为应用中的每个路由生成类型，从而为路由模块导出提供类型安全。

例如，假设您配置了一个 products/:id 路由

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

export default [
  route("products/:id", "./routes/product.tsx"),
] satisfies RouteConfig;

您可以像这样导入路由特有的类型

import type { Route } from "./+types/product";
// types generated for this route 👆

export function loader({ params }: Route.LoaderArgs) {
  //                      👆 { id: string }
  return { planet: `world #${params.id}` };
}

export default function Component({
  loaderData, // 👈 { planet: string }
}: Route.ComponentProps) {
  return <h1>Hello, {loaderData.planet}!</h1>;
}

工作原理

React Router 的类型生成会执行您的路由配置（默认为 app/routes.ts）来确定应用的路由。然后，它会在一个特殊的 .react-router/types/ 目录下为每个路由生成一个 +types/<route file>.d.ts 文件。通过配置 rootDirs，TypeScript 可以像导入与对应路由模块相邻的文件一样导入这些生成的文件。

要更深入地了解一些设计决策，请查看我们的类型推断决策文档。

typegen 命令

您可以使用 typegen 命令手动生成类型

react-router typegen

为每个路由生成以下类型

• LoaderArgs
• ClientLoaderArgs
• ActionArgs
• ClientActionArgs
• HydrateFallbackProps
• ComponentProps（用于 default 导出）
• ErrorBoundaryProps

--watch

如果您运行 react-router dev，或者您的自定义服务器调用了 vite.createServer，那么 React Router 的 Vite 插件已经为您生成了最新的类型。但是，如果您确实需要单独运行类型生成，您也可以使用 --watch 来在文件更改时自动重新生成类型。

react-router typegen --watch