Lesson

Provide NotFoundComponent at Nested Route or Global Level in Tanstack Router

Handle notFound errors in TanStack Router with notFoundComponent at nested or global levels.

Access
Included
Transcript
Needs source

In this lesson, we learn how to handle not found errors in TanStack Router by using the notFoundComponent at both nested and global levels.

To trigger the display of a notFoundComponent, we must throw a specific error using the notFound function within a loader or other lifecycle method of a route. This approach allows us to provide custom error messages for specific routes or globally across the application.

We explore how to define a notFoundComponent within a specific route's configuration and how to set a defaultNotFoundComponent at the router global level, which applies to all routes unless overridden locally. This flexibility ensures that users receive meaningful feedback when encountering non-existent routes.