AgentSkillsCN

tanstack-router

TanStack Router——一款完全类型安全的React路由库,支持基于文件的路由、搜索参数校验、加载器,以及内置缓存功能。在使用TanStack Router构建应用,或询问其路由配置、基于文件的路由、类型安全的链接、搜索参数、加载器,或导航模式时使用。获取最新版的实时文档,以了解最新详情。

SKILL.md
--- frontmatter
name: tanstack-router
description: "TanStack Router — fully type-safe router for React with file-based routing, search params validation, loaders, and built-in caching. Use when building with TanStack Router or asking about its route configuration, file-based routing, type-safe links, search params, loaders, or navigation patterns. Fetch live documentation for up-to-date details."

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

Best Practices

  • Register the router instance for full type safety — declare Register interface 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 loaderDeps for any search params used in loaders — loaders intentionally cannot access search params directly; omitting loaderDeps means cache keys ignore param changes, causing stale data bugs that are silent and hard to trace.
  • File-based route nesting uses . not foldersblog.post.tsx means post is a child of blog. 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.ts is stale and Link, useNavigate, and other typed APIs fall back to any, silently breaking type safety with no obvious error.
  • notFound() and redirect() 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.