类型安全

如果您尚未这样做，请查看我们的设置类型安全的新项目指南。

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

类型安全

它是如何工作的

typegen 命令

--watch

`typegen` 命令