Skip to content

Commit 3a14ffc

Browse files
chore: Fixed the defaultNotFoundComponent as guided by #5757 (#5937)
* fix: Fixed the defaultNotFoundComponent as guided by #5757 * ci: apply automated fixes * fix: correct from <div> to <p> tag * chore: added docstring to renderRouteNotFound.tsx for both react-router and solid-router * ci: apply automated fixes * chore: revert file changes by autofix-ci[bot] * ci: apply automated fixes * chore: cleanup documentation of not-found-errors.md --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 2fd4cba commit 3a14ffc

File tree

3 files changed

+19
-3
lines changed

3 files changed

+19
-3
lines changed

docs/router/framework/react/guide/not-found-errors.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export const Route = createFileRoute('/posts/$postId')({
164164

165165
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.
166166

167-
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 `<div>Not Found</div>`. 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.
167+
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 `<p>Not Found</p>`. 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.
168168

169169
> ⚠️ 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.
170170

packages/react-router/src/renderRouteNotFound.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@ import warning from 'tiny-warning'
33
import { DefaultGlobalNotFound } from './not-found'
44
import type { AnyRoute, AnyRouter } from '@tanstack/router-core'
55

6+
/**
7+
* Renders a not found component for a route when no matching route is found.
8+
*
9+
* @param router - The router instance containing the route configuration
10+
* @param route - The route that triggered the not found state
11+
* @param data - Additional data to pass to the not found component
12+
* @returns The rendered not found component or a default fallback component
13+
*/
614
export function renderRouteNotFound(
715
router: AnyRouter,
816
route: AnyRoute,
@@ -16,7 +24,7 @@ export function renderRouteNotFound(
1624
if (process.env.NODE_ENV === 'development') {
1725
warning(
1826
route.options.notFoundComponent,
19-
`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 (<div>Not Found<div>)`,
27+
`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 (<p>Not Found</p>)`,
2028
)
2129
}
2230

packages/solid-router/src/renderRouteNotFound.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@ import warning from 'tiny-warning'
22
import { DefaultGlobalNotFound } from './not-found'
33
import type { AnyRoute, AnyRouter } from '@tanstack/router-core'
44

5+
/**
6+
* Renders a not found component for a route when no matching route is found.
7+
*
8+
* @param router - The router instance containing the route configuration
9+
* @param route - The route that triggered the not found state
10+
* @param data - Additional data to pass to the not found component
11+
* @returns The rendered not found component or a default fallback component
12+
*/
513
export function renderRouteNotFound(
614
router: AnyRouter,
715
route: AnyRoute,
@@ -15,7 +23,7 @@ export function renderRouteNotFound(
1523
if (process.env.NODE_ENV === 'development') {
1624
warning(
1725
route.options.notFoundComponent,
18-
`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 (<div>Not Found<div>)`,
26+
`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 (<p>Not Found</p>)`,
1927
)
2028
}
2129

0 commit comments

Comments
 (0)