TanStack Router - 100% type-safe routing, file-based routes, loaders, search params. Use when implementing routing in React apps (NOT Next.js).
View on GitHubFebruary 2, 2026
Select agents to install to:
npx add-skill https://github.com/fusengine/agents/blob/main/plugins/react-expert/skills/react-tanstack-router/SKILL.md -a claude-code --skill react-tanstack-routerInstallation paths:
.claude/skills/react-tanstack-router/# TanStack Router 100% type-safe router for React with file-based routing, loaders, search params validation, and deep TanStack Query integration. ## Agent Workflow (MANDATORY) Before ANY implementation, launch in parallel: 1. **fuse-ai-pilot:explore-codebase** - Analyze existing routes and navigation patterns 2. **fuse-ai-pilot:research-expert** - Verify latest TanStack Router docs via Context7/Exa 3. **mcp__context7__query-docs** - Check file-based routing and type-safe patterns After implementation, run **fuse-ai-pilot:sniper** for validation. --- ## Overview ### Why TanStack Router? TanStack Router is the recommended choice for React SPAs requiring type-safe routing with search params validation. | Feature | TanStack Router | React Router v7 | |---------|----------------|-----------------| | Type Safety | Full inference | Auto-generated | | File-based Routing | Built-in | Framework mode | | Search Params Validation | Zod, Valibot | Manual | | Preloading | Intent, render | Limited | | TanStack Query Integration | Native | Manual | ### When to Use - **React SPA** with Vite, Webpack, or Rspack → See [installation.md](references/installation.md) - **Type-safe routing** required → See [typescript.md](references/typescript.md) - **Search params validation** needed → See [search-params.md](references/search-params.md) - **TanStack Query** for data fetching → See [tanstack-query.md](references/tanstack-query.md) - **NOT Next.js** (use App Router instead) --- ## Critical Rules 1. **ALWAYS use file-based routing** - Auto-generated type safety → [file-based-routing.md](references/file-based-routing.md) 2. **ALWAYS validate search params** - Use Zod schemas with `zodValidator` → [search-params.md](references/search-params.md) 3. **ALWAYS use Route.useLoaderData()** - Not global useLoaderData → [hooks.md](references/hooks.md) 4. **ALWAYS register router types** - `declare module '@tanstack/react-router'` → [typescript.md](references/typescript.md) 5. **PREFER