TanStack Router

TanStack Router is a fully type-safe router for React that treats routes, loaders, params, and search params as first-class typed data rather than untyped strings.

Workflow for Adding a New Route

1. Create the route file — Add a file under src/routes/ following the file-based routing convention (see below).
2. Define the route — Export Route from createFileRoute('/path')({...}) with component, and optionally loader, validateSearch, beforeLoad, errorComponent, and pendingComponent.
3. Validate search params — If the route reads query params, define a Zod schema and pass it as validateSearch.
4. Load data — Fetch data in loader, not in a component useEffect; integrate with TanStack Query via queryClient.ensureQueryData when caching is needed.
5. Guard access — Add beforeLoad checks (e.g. auth) that throw redirect({ to: '/login' }) when a precondition fails.
6. Link to the route — Navigate with <Link to="/path" params={...} search={...}> so the compiler validates params and search at every call site.
7. Regenerate the route tree — Ensure routeTree.gen.ts is regenerated (automatic under the Vite plugin's dev server / build) before running or building the app.

Core Principles