router-core

Implements type-safe routing with TanStack Router route trees, loaders, and navigation.

1.4k|34|Updated Mar 7, 2024
One-click install
npx skills add https://github.com/mehdibha/dotUI --skill router-core-mehdibha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core
Source: https://github.com/mehdibha/dotUI/tree/main/.claude/skills/tanstack-router-core
Command: npx skills add https://github.com/mehdibha/dotUI --skill router-core-mehdibha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-router, @tanstack/router-core.

What problem does it solve? Building type-safe client-side routing in React or Solid apps with TanStack Router is error-prone: agents often cast inferred types, confuse client-first loaders with Next.js server behavior, or mismatch createFileRoute path strings. This Skill provides the core concepts and correct patterns to avoid those mistakes. ## Core Features & Use Cases - Route Tree Construction: Create root routes, file routes, and routers with createRootRoute, createRoute, createRouter, and the mandatory Register type declaration for full type inference. - Sub-Skill Routing: A decision tree directs you to specialized sub-skills for search params, path params, navigation, data loading, auth guards, code splitting, error handling, type safety, and SSR. - Use Case: When scaffolding a new React app with TanStack Router, use this Skill to set up __root.tsx, index routes, the router instance with Register declaration, and RouterProvider wiring correctly on the first attempt. ## Quick Start Set up a minimal TanStack Router app with a root route, an index file route, a typed router instance with the Register declaration, and RouterProvider in main.tsx.

Frequently Asked Questions about router-core

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

FAQPage Schema
How do I set up TanStack Router in a React app?▼

Create a root route with createRootRoute in __root.tsx, define file routes with createFileRoute, then build the router with createRouter passing the generated routeTree. Add the Register module declaration and render RouterProvider in your app entry.

How does TanStack Router differ from Next.js routing?▼

TanStack Router is client-first: loaders run on the client by default, not server-only like Next.js or Remix. It provides fully inferred types, JSON-first search params, and built-in SWR caching rather than server component semantics.

Why does TanStack Router lose type autocomplete for Link and useNavigate?▼

Autocomplete fails when the Register interface declaration is missing. You must declare module "@tanstack/react-router" with interface Register containing your router type so route paths and params are inferred across the app.

Should I cast or annotate types in TanStack Router code?▼

No. TanStack Router types are fully inferred, and casting or annotating inferred values is the most common mistake. Let inference flow from the route tree through loaders, params, and search validators.

Does TanStack Router support server-side rendering?▼

Yes, it supports streaming and non-streaming SSR with hydration and head management, covered in the SSR sub-skill. Loaders still default to client execution, so SSR requires explicit configuration.