react-tanstack-router_skill

Overview

This skill provides a practical guide and patterns for implementing TanStack Router in React applications. It focuses on 100% type-safe, file-based routing with loaders, search-params validation, and first-class TanStack Query integration. Use it to standardize routing, data loading, and URL-driven state across a SOLID-structured React SPA.

How this skill works

It prescribes file-based route files that export typed Route instances, each able to declare loaders, beforeLoad guards, and validated search schemas. Loaders integrate with a shared QueryClient so pages preload and cache data via TanStack Query. The skill also requires an agent workflow for discovery and validation before and after changes.

When to use it

• Building a React SPA (Vite, Webpack, Rspack) — not for Next.js App Router
• You need full TypeScript inference for route params and search params
• Pages require data preloading and caching with TanStack Query
• You want consistent, file-based routing structure across a codebase
• Implementing protected routes, nested layouts, or URL-driven filters

Best practices

• Always use file-based routing to get auto-generated type safety
• Validate search params with Zod (zodValidator) for predictable parsing and defaults
• Prefer Route loaders (and ensureQueryData) over useEffect to fetch data before render
• Register router module types (declare module '@tanstack/react-router') for global type inference
• Integrate TanStack Query for caching, optimistic updates, and consistent queryOptions

Example use cases

• Posts listing page with Zod-validated filter and pagination search params and a loader that ensures query data
• Protected admin dashboard that redirects unauthenticated users in beforeLoad and uses nested layouts
• Post detail route using createFileRoute('/posts/$postId') with a loader that uses queryClient.ensureQueryData
• Feature module scaffolded with SOLID folders: interfaces, queries, components, and exported route files
• Prefetching link intent to preload heavy pages and improve perceived performance