diff --git a/docs/router/framework/react/guide/not-found-errors.md b/docs/router/framework/react/guide/not-found-errors.md index 36d5a0bdd4d..e370a805aa3 100644 --- a/docs/router/framework/react/guide/not-found-errors.md +++ b/docs/router/framework/react/guide/not-found-errors.md @@ -164,7 +164,7 @@ export const Route = createFileRoute('/posts/$postId')({ The not-found error above will be handled by the same route or nearest parent route that has either a `notFoundComponent` route option or the `defaultNotFoundComponent` router option configured. -If neither the route nor any suitable parent route is found to handle the error, the root route will handle it using TanStack Router's **extremely basic (and purposefully undesirable)** default not-found component that simply renders `
Not Found
`. It's highly recommended to either attach at least one `notFoundComponent` to the root route or configure a router-wide `defaultNotFoundComponent` to handle not-found errors. +If neither the route nor any suitable parent route is found to handle the error, the root route will handle it using TanStack Router's **extremely basic (and purposefully undesirable)** default not-found component that simply renders `

Not Found

`. It's highly recommended to either attach at least one `notFoundComponent` to the root route or configure a router-wide `defaultNotFoundComponent` to handle not-found errors. > ⚠️ Throwing a notFound error in a beforeLoad method will always trigger the \_\_root notFoundComponent. Since beforeLoad methods are run prior to the route loader methods, there is no guarantee that any required data for layouts have successfully loaded before the error is thrown. diff --git a/packages/react-router/src/renderRouteNotFound.tsx b/packages/react-router/src/renderRouteNotFound.tsx index 86f31dfc220..225a013beae 100644 --- a/packages/react-router/src/renderRouteNotFound.tsx +++ b/packages/react-router/src/renderRouteNotFound.tsx @@ -3,6 +3,14 @@ import warning from 'tiny-warning' import { DefaultGlobalNotFound } from './not-found' import type { AnyRoute, AnyRouter } from '@tanstack/router-core' +/** + * Renders a not found component for a route when no matching route is found. + * + * @param router - The router instance containing the route configuration + * @param route - The route that triggered the not found state + * @param data - Additional data to pass to the not found component + * @returns The rendered not found component or a default fallback component + */ export function renderRouteNotFound( router: AnyRouter, route: AnyRoute, @@ -16,7 +24,7 @@ export function renderRouteNotFound( if (process.env.NODE_ENV === 'development') { warning( route.options.notFoundComponent, - `A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (
Not Found
)`, + `A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (

Not Found

)`, ) } diff --git a/packages/solid-router/src/renderRouteNotFound.tsx b/packages/solid-router/src/renderRouteNotFound.tsx index 4603e6c0a31..9160e624995 100644 --- a/packages/solid-router/src/renderRouteNotFound.tsx +++ b/packages/solid-router/src/renderRouteNotFound.tsx @@ -2,6 +2,14 @@ import warning from 'tiny-warning' import { DefaultGlobalNotFound } from './not-found' import type { AnyRoute, AnyRouter } from '@tanstack/router-core' +/** + * Renders a not found component for a route when no matching route is found. + * + * @param router - The router instance containing the route configuration + * @param route - The route that triggered the not found state + * @param data - Additional data to pass to the not found component + * @returns The rendered not found component or a default fallback component + */ export function renderRouteNotFound( router: AnyRouter, route: AnyRoute, @@ -15,7 +23,7 @@ export function renderRouteNotFound( if (process.env.NODE_ENV === 'development') { warning( route.options.notFoundComponent, - `A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (
Not Found
)`, + `A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (

Not Found

)`, ) }