tanstack-router
SKILL.md
TanStack Router
TanStack Router is a fully type-safe router for React with first-class file-based routing, search params validation, loaders, and built-in caching.
Documentation
- Docs: https://tanstack.com/router/latest/docs/framework/react/overview
- GitHub: https://github.com/TanStack/router
Best Practices
- Register the router instance for full type safety — declare
Registerinterface augmentation (interface Register { router: typeof router }) in your entry file; without it,Link,useNavigate, and related hooks fall back to loose types across the module boundary. - Search params require explicit validation via
validateSearch— raw URL strings are never passed to components; always define a schema (Zod, Valibot, etc.) on the route, or params will be unavailable or throw at runtime. - Declare
loaderDepsfor any search params used in loaders — loaders intentionally cannot access search params directly; omittingloaderDepsmeans cache keys ignore param changes, causing stale data bugs that are silent and hard to trace. - File-based route nesting uses
.not folders —blog.post.tsxmeanspostis a child ofblog. Two distinct_conventions: a leading_prefix (e.g.,_layout.tsx) creates a pathless layout that wraps children without adding a URL segment; a trailing_suffix on a path segment (e.g.,blog_.tsx) opts that branch out of the parent's layout wrapper while keeping URL nesting. These have opposite effects — easy to confuse. router.invalidate()is coarse-grained — it reloads all active routes at once; pair TanStack Router with TanStack Query when you need granular per-query invalidation after mutations.- Run
tsr generate(or the Vite plugin) to keep the route tree in sync. Without this codegen step,routeTree.gen.tsis stale andLink,useNavigate, and other typed APIs fall back toany, silently breaking type safety with no obvious error. notFound()andredirect()must be thrown, not returned from loaders. These are sentinel values caught by the router — returning them instead of throwing causes the loader to appear to succeed with an unexpected value, producing hard-to-trace runtime bugs.
Weekly Installs
3
Repository
mikkelkrogsholm…v-skillsGitHub Stars
1
First Seen
11 days ago
Security Audits
Installed on
opencode3
claude-code3
github-copilot3
codex3
kimi-cli3
gemini-cli3