型別安全

如果您還沒有這樣做，請查看我們關於在新專案中設定型別安全的指南。

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