skills.rest
cill-i-am
cill-i-amCOMMUNITY
Explore all skills by this author →
𝕏@cillo_bGitHub

router-core/not-found-and-errors

Configure not-found and error handling for TanStack Router routes.

Updated Apr 1, 2026
Search Tags:#router#error-handling#tanstack-router#loader#not-found#route-masking#not-found-component
One-click install
npx skills add https://github.com/cill-i-am/task-tracker --skill router-core-not-found-and-errors-cill-i-am
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/cill-i-am/task-tracker/tree/main/.agents/skills/tanstack-router-not-found-and-errors
Command: npx skills add https://github.com/cill-i-am/task-tracker --skill router-core-not-found-and-errors-cill-i-am

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Router requires robust handling for not-found and errors, including per-route boundaries, global defaults, and safe data handling.

Core Features & Use Cases

  • Global notFoundComponent on root route and defaultNotFoundComponent
  • Per-route notFoundComponent via notFound() and route-specific targeting
  • notFoundMode (fuzzy vs root) for flexible error routing
  • errorComponent per route and default error behavior with retry via router.invalidate()
  • Safe data handling in notFoundComponent using the data argument

Quick Start

Configure a root route with a notFoundComponent and use notFound() in loaders to trigger per-route not-found boundaries.

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 handle not-found pages in TanStack Router?▼

Configure not-found pages in TanStack Router by setting a global notFoundComponent on the root route or triggering per-route notFound boundaries within loaders to display custom UI for missing paths.

How does error handling work in TanStack Router route trees?▼

Error handling in TanStack Router uses errorComponent definitions per route to catch errors across route trees. Default error behavior can trigger a retry by calling router.invalidate() to refresh route state.

What is the difference between fuzzy and root notFoundMode in TanStack Router?▼

The notFoundMode setting in TanStack Router determines error routing boundaries. Fuzzy mode renders the closest matching not-found component, while root mode forces the global defaultNotFoundComponent to render for any missing path.

Can I pass data to the notFoundComponent in TanStack Router?▼

Yes, you can pass data to the notFoundComponent in TanStack Router. The component receives a data argument ensuring safe data handling, allowing you to forward loader data securely to the not-found UI.

How do I use route masking with not-found handling in TanStack Router?▼

Route masking in TanStack Router works alongside not-found handling by forwarding data safely. You can configure a defaultNotFoundComponent and use notFound() in loaders to trigger boundaries while masking route paths and passing data.

Related Skills

Explore More Software Engineering Skills→
tech-with-sethtech-with-seth
4

add-error-boundary

Add standardized route error boundaries to React Router 7 apps.

Official
Intermediate
jmgomezdevjmgomezdev

resilience

Standardize asynchronous UI state with Suspense, skeletons, and error boundaries in TanStack Router and Query.

Community
Advanced
rezicsrezics
6

router-core/not-found-and-errors

Coordinate not-found and error boundaries for TanStack Router routes.

Official
Advanced
TanStackTanStack
14.9k

router-core/not-found-and-errors

Configure notFound() and errorComponent for TanStack Router routes.

Official
Advanced