diff --git a/docs/framework/react/api/router/NotFoundErrorType.md b/docs/framework/react/api/router/NotFoundErrorType.md index 54a1904eee..994a8430e8 100644 --- a/docs/framework/react/api/router/NotFoundErrorType.md +++ b/docs/framework/react/api/router/NotFoundErrorType.md @@ -24,6 +24,16 @@ The `NotFoundError` object accepts/contains the following properties: - Optional - Custom data that is passed into to `notFoundComponent` when the not-found error is handled +It is possible to override the `any` type with your own more specific type by extending the `NotFoundErrorData` interface: + +```ts +declare module '@tanstack/react-router' { + interface NotFoundErrorData { + data: /* your type here */ + } +} +``` + ### `global` property - Type: `boolean` diff --git a/packages/react-router/src/index.tsx b/packages/react-router/src/index.tsx index c4dd49bafc..04211096c0 100644 --- a/packages/react-router/src/index.tsx +++ b/packages/react-router/src/index.tsx @@ -338,7 +338,7 @@ export { CatchNotFound, DefaultGlobalNotFound, } from './not-found' -export type { NotFoundError } from './not-found' +export type { NotFoundError, NotFoundErrorData } from './not-found' export type { Manifest, RouterManagedTag } from './manifest' diff --git a/packages/react-router/src/not-found.tsx b/packages/react-router/src/not-found.tsx index 9db1d473e0..59e2c68d39 100644 --- a/packages/react-router/src/not-found.tsx +++ b/packages/react-router/src/not-found.tsx @@ -5,6 +5,8 @@ import type { ErrorInfo } from 'react' import type { RegisteredRouter } from './router' import type { RouteIds } from './routeInfo' +export interface NotFoundErrorData {} + export type NotFoundError = { /** @deprecated @@ -16,7 +18,19 @@ export type NotFoundError = { Do not use this. It's used internally to indicate a path matching error */ _global?: boolean - data?: any + /** + This property can be typed globally using the `NotFoundErrorData` interface + ```ts + declare module '@tanstack/react-router' { + interface NotFoundErrorData { + data: { + // your properties here + } + } + } + ``` + */ + data?: NotFoundErrorData extends { data: infer TData } ? TData : any throw?: boolean routeId?: RouteIds headers?: HeadersInit diff --git a/packages/react-router/src/route.ts b/packages/react-router/src/route.ts index 9c5c265296..3e8ec3efb3 100644 --- a/packages/react-router/src/route.ts +++ b/packages/react-router/src/route.ts @@ -1599,7 +1599,7 @@ export type ErrorComponentProps = { } export type NotFoundRouteProps = { // TODO: Make sure this is `| null | undefined` (this is for global not-founds) - data: unknown + data: NotFoundError['data'] | null | undefined } //