@react-router/dev | react-router |
---|---|
minor |
minor |
React Router now generates types for each of your route modules.
You can access those types by importing them from ./+types/<route filename without extension>
.
For example:
// app/routes/product.tsx
import type { Route } from "./+types/product";
export function loader({ params }: Route.LoaderArgs) {}
export default function Component({ loaderData }: Route.ComponentProps) {}
This initial implementation targets type inference for:
Params
: Path parameters from your routing config inroutes.ts
including file-based routingLoaderData
: Loader data fromloader
and/orclientLoader
within your route moduleActionData
: Action data fromaction
and/orclientAction
within your route module
In the future, we plan to add types for the rest of the route module exports: meta
, links
, headers
, shouldRevalidate
, etc.
We also plan to generate types for typesafe Link
s:
<Link to="/products/:id" params={{ id: 1 }} />
// ^^^^^^^^^^^^^ ^^^^^^^^^
// typesafe `to` and `params` based on the available routes in your app
Check out our docs for more: