router-core

Define type-safe route trees, loaders, and context for TanStack Router across React, Solid, and SSR.

14.9k|1.8k|Updated Jan 14, 2019
One-click install
npx skills add https://github.com/TanStack/router --skill router-core
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: router-core
Source: https://github.com/TanStack/router/tree/main/packages/router-core/skills/router-core
Command: npx skills add https://github.com/TanStack/router --skill router-core

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a framework-agnostic, strongly-typed core for TanStack Router that enables consistent route definitions, type inference, and safe composition across React, Solid, and SSR scenarios.

Core Features & Use Cases

  • Framework-agnostic core concepts: route trees, createRouter, createRoute, createRootRoute, and shared context/registration.
  • End-to-end type inference: params, search params, loader data, and route context flow without manual casts.
  • Production-grade routing patterns: beforeLoad, loaders, notFound, error handling, and route masking with code-splitting guidance.
  • SSR-friendly integration: dehydration/hydration hooks and compatibility with TanStack Start for server rendering.

Quick Start

Create a root route with createRootRoute and wire up a router using createRouter, then progressively add typed routes and context.

Frequently Asked Questions about router-core

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

FAQPage Schema
How do I ensure type safety for route params and loader data in TanStack Router?

Type safety in TanStack Router is enforced through end-to-end type inference, allowing params, search params, loader data, and route context to flow without manual casts. A single Register declaration unifies the route tree for strict validation.

Does TanStack Router support SSR and hydration lifecycles?

TanStack Router supports SSR through dehydration and hydration hooks, ensuring compatibility with TanStack Start. This enables safe server rendering and client hydration while maintaining type-safe route definitions and context.

How do I handle notFound behavior and error handling in a route tree?

You handle notFound behavior and errors by applying production-grade routing patterns within your route tree. TanStack Router provides mechanisms for beforeLoad, loaders, and clear error handling boundaries to manage missing routes robustly.

Can I use TanStack Router for framework-agnostic routing across React and Solid?

TanStack Router provides a framework-agnostic core that unifies route trees, loaders, and context across React, Solid, and SSR. You use createRouter and createRoute to build consistent definitions regardless of the rendering framework.

What is the best way to implement code-splitting and route masking in TanStack Router?

The best way to implement code-splitting is by combining route masking with production-grade routing patterns. TanStack Router provides guidance for splitting strategies alongside beforeLoad and loader lifecycles to optimize bundles safely.

How do I define per-route context in TanStack Router?

You define per-route context using createRootRoute and createRoute, allowing shared context and registration to flow through the route tree. This ensures type-safe composition and strict validation for each route's specific requirements.