router-core/not-found-and-errors

Configure custom 404 pages and error boundaries in TanStack Router.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/guillempuche/engranatge --skill router-core-not-found-and-errors-guillempuche
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/guillempuche/engranatge/tree/main/docs/repos/tanstack-router/packages/router-core/skills/router-core/not-found-and-errors
Command: npx skills add https://github.com/guillempuche/engranatge --skill router-core-not-found-and-errors-guillempuche

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It provides a clear and consistent way to manage missing pages, missing data, and runtime errors in TanStack Router, preventing users from seeing broken or confusing interfaces.

Core Features & Use Cases

  • Custom not‑found components for global, default, and per‑route 404 handling.
  • Error boundaries that display friendly messages and allow retry via router.invalidate().
  • Not‑found mode selection (fuzzy vs root) to control how unmatched routes are resolved.
  • Route masking to show alternate URLs without changing the rendered route, with optional unmasking on reload.
  • Best‑practice guidance to avoid deprecated NotFoundRoute and unsafe data access in not‑found components.

Quick Start

Use the router to show a custom 404 page for missing posts by calling the notFound() function inside the route loader.

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 404 not found errors in TanStack Router for unmatched routes?

Handle 404 not found errors in TanStack Router by configuring notFoundComponent and defaultNotFoundComponent to display custom pages for unmatched routes and missing resources.

How does route masking work in TanStack Router and when should I use it?

Route masking in TanStack Router shows alternate URLs without changing the rendered route by calling createRouteMask, optionally unmasking on reload to reveal the true path.

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

NotFoundMode settings in TanStack Router control how unmatched routes are resolved: fuzzy attempts partial route resolution, while root mode strictly falls back to the root not-found component.

How do I set up global error boundaries in a React application using TanStack Router?

Set up global error boundaries in TanStack Router by defining errorComponent configurations that display friendly messages and allow retrying data fetching via router.invalidate().

How do I trigger a custom 404 page when data is missing in a TanStack Router loader?

Trigger a custom 404 page from a TanStack Router loader by calling the notFound() function inside the route loader to signal missing data and render the configured notFoundComponent.

Why should I avoid using deprecated NotFoundRoute and unsafe data access in TanStack Router?

Avoid deprecated NotFoundRoute and unsafe data access in TanStack Router because they bypass modern notFoundMode and errorComponent boundaries, causing inconsistent error handling and runtime crashes.