React Router generates route-specific types to power type inference for URL params, loader data, and more. This guide will help you set it up if you didn't start with a template.
To learn more about how type safety works in React Router, check out Type Safety Explanation.
.react-router/
to .gitignore
React Router generates types into a .react-router/
directory at the root of your app. This directory is fully managed by React Router and should be gitignore'd.
.react-router/
Edit your tsconfig to get TypeScript to use the generated types. Additionally, rootDirs
needs to be configured so the types can be imported as relative siblings to route modules.
{
"include": [".react-router/types/**/*"],
"compilerOptions": {
"rootDirs": [".", "./.react-router/types"]
}
}
If you are using multiple tsconfig
files for your app, you'll need to make these changes in whichever one include
s your app directory.
For example, the node-custom-server
template contains tsconfig.json
, tsconfig.node.json
, and tsconfig.vite.json
. Since tsconfig.vite.json
is the one that includes the app directory, that's the one that sets up .react-router/types
for route module type safety.
If you want to run type checking as its own command — for example, as part of your Continuous Integration pipeline — you'll need to make sure to generate types before running typechecking:
{
"scripts": {
"typecheck": "react-router typegen && tsc"
}
}
When auto-importing the Route
type helper, TypeScript will generate:
import { Route } from "./+types/my-route";
This will work, but you may want the type
modifier for the import added automatically as well.
import type { Route } from "./+types/my-route";
// ^^^^
For example, this helps tools like bundlers to detect type-only module that can be safely excluded from the bundle.
In VSCode, you can get this behavior automatically by selecting TypeScript › Preferences: Prefer Type Only Auto Imports
from the command palette or by manually setting preferTypeOnlyAutoImports
:
{
"typescript.preferences.preferTypeOnlyAutoImports": true
}
In eslint, you can get this behavior by setting prefer: "type-imports"
for the consistent-type-imports
rule:
{
"@typescript-eslint/consistent-type-imports": [
"warn",
{ "prefer": "type-imports" }
]
}
React Router's Vite plugin should be automatically generating types into .react-router/types/
anytime you edit your route config (routes.ts
).
That means all you need to do is run react-router dev
(or your custom dev server) to get to up-to-date types in your routes.
Check out our Type Safety Explanation for an example of how to pull in those types into your routes.