TanStack Router Patterns

Quick Guide: TanStack Router provides fully type-safe client-side routing for React. Use file-based routing with @tanstack/router-plugin for automatic route tree generation. Define search params with Zod via @tanstack/zod-adapter. Use loader for data fetching, beforeLoad for guards/redirects, and createRootRouteWithContext for dependency injection. Version: v1.x (stable).

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST use createFileRoute for all file-based routes - NEVER define routes manually when using the router plugin)

(You MUST validate search params with validateSearch - NEVER read raw window.location.search)

(You MUST use beforeLoad for auth guards and redirects - NEVER check auth inside component render)

(You MUST pass services via router context - NEVER import them directly in loaders (breaks testability))