Type Safety

If you haven't done so already, check out our guide for setting up type safety in a new project.

React Router generates types for each route in your app that provide type safety for the route module exports.

For example, let's say you have a products/:id route configured:

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

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

You can import route-specific types like so:

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

How it works

React Router's type generation executes your route config (app/routes.ts by default) to determine the routes for your app. It then generates a +types/<route file>.d.ts for each route within a special .react-router/types/ directory. With rootDirs configured, TypeScript can import these generated files as if they were right next to their corresponding route modules.

For a deeper dive into some of the design decisions, check out our type inference decision doc.

typegen command

You can manually generate types with the typegen command:

react-router typegen

The following types are generated for each route:

• LoaderArgs
• ClientLoaderArgs
• ActionArgs
• ClientActionArgs
• HydrateFallbackProps
• ComponentProps (for the default export)
• ErrorBoundaryProps

--watch

If you run react-router dev — or if your custom server calls vite.createServer — then React Router's Vite plugin is already generating up-to-date types for you. But if you really need to run type generation on its own, you can also use --watch to automatically regenerate types as files change:

react-router typegen --watch