skills.rest
Albo-Club
Albo-ClubOFFICIAL
Explore all skills by this author →
WebsiteGitHub

not-found-and-errors

Implement 404 handling, error boundaries, and route masking in TanStack Router applications.

Updated May 26, 2026
Search Tags:#error handling#tanstack router#error boundary#react routing#404 page#notfound#route masking
One-click install
npx skills add https://github.com/Albo-Club/albo-os --skill not-found-and-errors-albo-club
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: not-found-and-errors
Source: https://github.com/Albo-Club/albo-os/tree/main/.agents/skills/tanstack-router-core/not-found-and-errors
Command: npx skills add https://github.com/Albo-Club/albo-os --skill not-found-and-errors-albo-club

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-router.

What problem does it solve? Handling unmatched URLs, missing resources, and loader failures in TanStack Router apps requires knowing which APIs to use and which deprecated patterns to avoid, and mistakes like using NotFoundRoute or reading loader data in a notFoundComponent silently break error handling. ## Core Features & Use Cases - Not-Found Handling: Configure global 404s with notFoundComponent on the root route, router-wide defaults, and per-route missing-resource pages by throwing notFound() from loaders. - Error Boundaries: Attach errorComponent per route or router-wide, with retry via 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 with unmaskOnReload control. - Use Case: When building a photo gallery modal, mask /photos/$photoId/modal as /photos/$photoId so the URL looks clean, while a thrown notFound() shows a friendly per-route 404 when the photo does not exist. ## Quick Start Show me how to add a global 404 page and a per-route error boundary with retry to my TanStack Router app.

Frequently Asked Questions about 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, or set defaultNotFoundComponent on createRouter for a router-wide fallback. Do not use the deprecated NotFoundRoute, which blocks notFound() and notFoundComponent from working.

How to show a not-found page when a resource is missing in TanStack Router?▼

Throw notFound() inside the route's loader or beforeLoad when the resource does not exist. The nearest parent route with children and a notFoundComponent renders it, and you can target a specific route with notFound({ routeId }).

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 errorComponent?▼

Call router.invalidate() from useRouter() inside the 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?▼

Masks survive local reloads by default unless unmaskOnReload is set on the mask, link, or router. However, masking data lives in location.state, so shared or copied masked URLs lose the mask and navigate to the visible URL directly.

Related Skills

Explore More Software Engineering Skills→
AngaelAngael

router-core

Implements type-safe TanStack Router route trees, navigation, and data loading patterns.

Community
Intermediate
SeanChenRSeanChenR

tanstack-router

Provide type-safe routing and integrated data loading for React and Solid apps.

Community
Intermediate
vercelvercel
246

swr

Cache and revalidate React data fetching with SWR hooks.

Official
Advanced
AgentientAgentient
2

nextjs-app-router-file-conventions

Enforce Next.js App Router file conventions for pages, layouts, and API routes.

Official
Intermediate