diff --git a/.changeset/red-eagles-stare.md b/.changeset/red-eagles-stare.md index 6278690be5..bc94d10f28 100644 --- a/.changeset/red-eagles-stare.md +++ b/.changeset/red-eagles-stare.md @@ -3,8 +3,8 @@ "react-router": patch --- -Generate wide `matches` and `params` types for child routes +Generate wide `matches` and `params` types for current route and child routes At runtime, `matches` includes child route matches and `params` include child route path parameters. -But previously, we only generated types for parent routes and the current route in `matches` and `params`. +But previously, we only generated types for parent routes in `matches`; for `params`, we only considered the parent routes and the current route. To align our generated types more closely to the runtime behavior, we now generate more permissive, wider types when accessing child route information. diff --git a/integration/typegen-test.ts b/integration/typegen-test.ts index e2838e3480..409ac8c14b 100644 --- a/integration/typegen-test.ts +++ b/integration/typegen-test.ts @@ -282,6 +282,10 @@ test.describe("typegen", () => { import { Expect, Equal } from "../expect-type" import type { Route } from "./+types/current" + export function loader() { + return { current: 3 } + } + export function meta({ matches }: Route.MetaArgs) { const parent1 = matches[1] type Test1 = Expect> @@ -289,8 +293,14 @@ test.describe("typegen", () => { const parent2 = matches[2] type Test2 = Expect> + const current = matches[3] + type Test3 = Expect> + const child1 = matches[4] - type Test3 = Expect> + type Test4a = Expect + if (child1) { + type Test4b = Expect> + } return [] } @@ -301,8 +311,14 @@ test.describe("typegen", () => { const parent2 = matches[2] type Test2 = Expect> + const current = matches[3] + type Test3 = Expect> + const child1 = matches[4] - type Test3 = Expect> + type Test4a = Expect + if (child1) { + type Test4b = Expect> + } } `, }); diff --git a/packages/react-router/lib/types/route-module.ts b/packages/react-router/lib/types/route-module.ts index d4c3333195..39e59e422c 100644 --- a/packages/react-router/lib/types/route-module.ts +++ b/packages/react-router/lib/types/route-module.ts @@ -48,14 +48,14 @@ type MetaMatch = Pretty< type MetaMatches = T extends [infer F extends RouteInfo, ...infer R extends RouteInfo[]] ? [MetaMatch, ...MetaMatches] - : MetaMatch[]; + : Array | undefined>; export type CreateMetaArgs = { location: Location; params: T["params"]; data: T["loaderData"]; error?: unknown; - matches: MetaMatches; + matches: MetaMatches<[...T["parents"], T]>; }; export type MetaDescriptors = MetaDescriptor[]; @@ -149,13 +149,13 @@ type Match = Pretty< type Matches = T extends [infer F extends RouteInfo, ...infer R extends RouteInfo[]] ? [Match, ...Matches] - : Match[]; + : Array | undefined>; export type CreateComponentProps = { params: T["params"]; loaderData: T["loaderData"]; actionData?: T["actionData"]; - matches: Matches; + matches: Matches<[...T["parents"], T]>; }; export type CreateErrorBoundaryProps = {