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