What problem does it solve? Setting up TanStack Router in a React app involves many moving parts—Vite plugin configuration, route registration, type-safe hooks, and SSR-aware patterns—and small mistakes (like calling hooks in loaders or misplacing providers) cause subtle bugs. This Skill provides the correct patterns and API reference for the React bindings of TanStack Router. ## Core Features & Use Cases - Complete Setup Guide: Covers installing @tanstack/react-router, configuring the Vite plugin with auto code-splitting, creating root and file-based routes, and registering router types for full type inference. - Hooks and Components Reference: Documents useRouter, useNavigate, useSearch, useParams, useLoaderData, useMatches, useBlocker, Link, Outlet, Navigate, Await, and CatchBoundary with working examples. - React-Specific Patterns: Explains createLink with forwardRef, reusable components across routes, auth provider ordering with RouterProvider, and common mistakes like using React hooks inside beforeLoad or loader functions. - Use Case: You are building a React SPA with TanStack Router and need to add a protected route that reads auth state, navigates after form submission, and renders deferred loader data with Suspense—this Skill gives you the exact correct code for each step. ## Quick Start Ask the AI to set up TanStack Router file-based routing in your React Vite project with a root layout, navigation links, and type-safe route registration.
