tanstack-router

Type-safe, file-based routing for React SPAs with route-level data loading and TanStack Query integration Last Updated : 2026-01-09 Version : @tanstack/react-router@1.146.2 Vite Config (TanStackRouterVite MUST come before react()): File Structure : App Setup : Type-Safe Navigation (routes auto-complete, params typed): Route Loaders (data fetching before render): TanStack Query Integration (prefetch + cache): Programmatic route configuration when file-based conventions don't fit your needs: Install : npm install @tanstack/virtual-file-routes Vite Config : routes.ts (define routes programmatically): Use Cases : Custom route organization, mixing file-based and code-based, complex nested layouts. Type-safe URL search params with runtime validation: Basic Pattern (inline validation): Recommended Pattern (Zod adapter with fallbacks): Why .catch() over .default() : Use .catch() to silently fix malformed params. Use .default() + errorComponent to show validation errors. Handle errors at route level with typed error components: Route-Level Error Handling : Default Error Component (global fallback): Not Found Handling : Protect routes before they load (no flash of protected content): Single Route Protection : Protect Multiple Routes (layout route pattern): Passing Auth Context (from React hooks): This skill prevents 20 documented issues: Issue #2: Vite Plugin Order (CRITICAL) Issue #3:...