skills.rest
Angael
AngaelCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

router-core-not-found-and-errors

Implement not-found handling, error boundaries, and route masking in TanStack Router applications.

Updated Dec 21, 2025
Search Tags:#tanstack router#error boundary#react routing#404 page#not found#route masking#loader errors
One-click install
npx skills add https://github.com/Angael/veles --skill router-core-not-found-and-errors-angael
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core-not-found-and-errors
Source: https://github.com/Angael/veles/tree/main/.agents/skills/router-core-not-found-and-errors
Command: npx skills add https://github.com/Angael/veles --skill router-core-not-found-and-errors-angael

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-router.

What problem does it solve? TanStack Router applications need consistent handling of unmatched URLs, missing resources, and loader errors, but the API surface spans notFound(), notFoundComponent, errorComponent, and route masking with several deprecated patterns and subtle pitfalls. ## Core Features & Use Cases - Not-Found Handling: Configure global 404 pages via notFoundComponent on the root route, router-wide defaults, and per-route notFound() throws for missing resources like a post that does not exist. - Error Boundaries: Attach errorComponent per route or router-wide, with retry logic driven by router.invalidate() to re-run loaders and reset the boundary. - Route Masking: Display a different browser URL than the rendered route using the mask option on Link, useNavigate, or declarative createRouteMask definitions. - Use Case: When building a photo gallery, throw notFound() in a loader for missing photos, render a contextual 404 via notFoundComponent, and mask the modal route so the URL shows /photos/$photoId while rendering the modal. ## Quick Start Ask the assistant to add a global 404 page and per-route error boundaries with retry buttons to your TanStack Router routes.

Frequently Asked Questions about router-core-not-found-and-errors

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a 404 page in TanStack Router?▼

Add a notFoundComponent to your root route created with createRootRoute to render a global 404 page for unmatched URLs. You can also set defaultNotFoundComponent on createRouter for a router-wide fallback.

How to handle missing resources with notFound() in TanStack Router?▼

Throw notFound() inside a loader or beforeLoad when a resource does not exist, and the nearest parent route with a notFoundComponent renders it. You can target a specific route with notFound({ routeId }) or the root with rootRouteId.

Why is useLoaderData undefined inside notFoundComponent?▼

The loader may not have completed when the not-found boundary renders, so useLoaderData can be undefined. Use Route.useParams, Route.useSearch, or Route.useRouteContext instead, or pass partial data via notFound({ data }).

How do I retry a failed loader in a TanStack Router error boundary?▼

Call router.invalidate() from useRouter inside your errorComponent. This re-runs the loader and automatically resets the error boundary, unlike calling reset() alone which only clears the boundary without re-fetching.

Does TanStack Router route masking survive page reloads or sharing?▼

Masking data is stored in location.state, so it is lost when the URL is shared or opened in a new tab. Masks survive local reloads by default unless you set unmaskOnReload on the mask, link, or router.

Should I use NotFoundRoute or notFoundComponent in TanStack Router?▼

Use notFoundComponent; NotFoundRoute is deprecated and blocks notFound() and notFoundComponent from working when present. Remove it and configure not-found UI on the root route or per route instead.

Related Skills

Explore More Software Engineering Skills→
wanghaishengwanghaisheng
10

tanstack-router-best-practices

Automate TanStack Router best practices for type-safe routing and data loading in React apps.

Community
Advanced
TanStackTanStack
14.9k

router-core/not-found-and-errors

Configure notFound() and errorComponent for TanStack Router routes.

Official
Advanced
janpeterdjanpeterd

tanstack-router

Build type-safe route trees with validated search parameters and loaders.

Community
Advanced
aroidoaroido

error-handling

Implement React error boundaries and graceful error handling strategies.

Official
Advanced