← ClaudeAtlas

tanstack-routerlisted

TanStack Router v1 for React — file-based routing, type-safe navigation, validated search params, loaders and router context. Use when working in a project that uses `@tanstack/react-router` — routeTree.gen.ts, createFileRoute, Link/useNavigate, validateSearch, loaderDeps, route masking, or code splitting.
Firzus/agent-skills · ★ 3 · API & Backend · score 74
Install: claude install-skill Firzus/agent-skills
# TanStack Router Reference for TanStack Router v1 with React. This skill covers **client-side routing only**. For the full-stack framework built on top of this router — server routes, server functions, SSR wiring, deployment — use the sibling `tanstack-start` skill. Everything here still applies inside a Start app: Start uses this router underneath. Prefer the project's existing route layout, validation library, and data layer; apply these rules on top so route identity, type inference, and cache keys stay predictable. Branch-specific references, loaded on demand: - [file-routing.md](./file-routing.md) — naming conventions, the generated route tree, layouts, groups, splat and optional params. - [search-params.md](./search-params.md) — `validateSearch`, schema adapters, search middlewares, reading and writing search state. - [data-loading.md](./data-loading.md) — loaders, `loaderDeps`, caching options, router context, pending/error/not-found components, deferred data. - [navigation.md](./navigation.md) — `Link`, `useNavigate`, relative paths, `linkOptions`, preloading, route masking. - [tanstack-query.md](./tanstack-query.md) — router as coordinator, the SSR query integration, and the split of responsibilities with TanStack Query. ## First Checks 1. Confirm `@tanstack/react-router` is installed and read the lockfile version. This skill targets v1. 2. Find the router instance (usually `src/router.tsx`). Read `createRouter` for `defaultPreload`, `defaultPr