tanstack-router-patternslisted

# TanStack Router Patterns — Type-Safe Routing ## Overview TanStack Router patterns for type-safe React SPAs: - File-based routing with code generation - Type-safe params and search params - Search params validated with Zod - Data loading with TanStack Query integration - Protected routes via `beforeLoad` - Lazy loading and code splitting - Router context for dependency injection --- ## Hard Rules <HARD-RULES> These rules are NON-NEGOTIABLE. Violating any of them is a bug. - ALWAYS use file-based routing with the TanStack Router code generator - ALWAYS use `Route.useParams()` for type-safe route params — NEVER parse `window.location` - ALWAYS validate search params with Zod schema via `validateSearch` - ALWAYS load data through route `loader` + TanStack Query `ensureQueryData` - ALWAYS use `useSuspenseQuery` in components that have a loader — data is never undefined - ALWAYS lazy load routes — code-split per route by default - ALWAYS protect routes via `beforeLoad` — NEVER use JSX wrapper components for auth guards - ALWAYS pass QueryClient through router context — NEVER import it directly in route files - NEVER use `useEffect` for data fetching in routed components — use loaders - NEVER use `react-router-dom` in new code — TanStack Router is the standard </HARD-RULES> --- ## File-Based Routing Conventions ### File Naming | Pattern | Meaning | Example | |---------|---------|---------| | `__root.tsx` | Root layout route | `routes/__root.tsx` | | `index.tsx` | Index