类型安全

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

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/.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