tanstack-router-best-practices
257
总安装量
256
周安装量
#1049
全站排名
安装命令
npx skills add https://github.com/deckardger/tanstack-agent-skills --skill tanstack-router-best-practices
Agent 安装分布
opencode
173
claude-code
142
codex
134
github-copilot
115
cursor
95
Skill 文档
TanStack Router Best Practices
Comprehensive guidelines for implementing TanStack Router patterns in React applications. These rules optimize type safety, data loading, navigation, and code organization.
When to Apply
- Setting up application routing
- Creating new routes and layouts
- Implementing search parameter handling
- Configuring data loaders
- Setting up code splitting
- Integrating with TanStack Query
- Refactoring navigation patterns
Rule Categories by Priority
| Priority | Category | Rules | Impact |
|---|---|---|---|
| CRITICAL | Type Safety | 4 rules | Prevents runtime errors and enables refactoring |
| CRITICAL | Route Organization | 5 rules | Ensures maintainable route structure |
| HIGH | Router Config | 1 rule | Global router defaults |
| HIGH | Data Loading | 6 rules | Optimizes data fetching and caching |
| HIGH | Search Params | 5 rules | Enables type-safe URL state |
| HIGH | Error Handling | 1 rule | Handles 404 and errors gracefully |
| MEDIUM | Navigation | 5 rules | Improves UX and accessibility |
| MEDIUM | Code Splitting | 3 rules | Reduces bundle size |
| MEDIUM | Preloading | 3 rules | Improves perceived performance |
| LOW | Route Context | 3 rules | Enables dependency injection |
Quick Reference
Type Safety (Prefix: ts-)
ts-register-routerâ Register router type for global inferencets-use-from-paramâ Usefromparameter for type narrowingts-route-context-typingâ Type route context with createRootRouteWithContextts-query-options-loaderâ Use queryOptions in loaders for type inference
Router Config (Prefix: router-)
router-default-optionsâ Configure router defaults (scrollRestoration, defaultErrorComponent, etc.)
Route Organization (Prefix: org-)
org-file-based-routingâ Prefer file-based routing for conventionsorg-route-tree-structureâ Follow hierarchical route tree patternsorg-pathless-layoutsâ Use pathless routes for shared layoutsorg-index-routesâ Understand index vs layout routesorg-virtual-routesâ Understand virtual file routes
Data Loading (Prefix: load-)
load-use-loadersâ Use route loaders for data fetchingload-loader-depsâ Define loaderDeps for cache controlload-ensure-query-dataâ Use ensureQueryData with TanStack Queryload-deferred-dataâ Split critical and non-critical dataload-error-handlingâ Handle loader errors appropriatelyload-parallelâ Leverage parallel route loading
Search Params (Prefix: search-)
search-validationâ Always validate search paramssearch-type-inheritanceâ Leverage parent search param typessearch-middlewareâ Use search param middlewaresearch-defaultsâ Provide sensible defaultssearch-custom-serializerâ Configure custom search param serializers
Error Handling (Prefix: err-)
err-not-foundâ Handle not-found routes properly
Navigation (Prefix: nav-)
nav-link-componentâ Prefer Link component for navigationnav-active-statesâ Configure active link statesnav-use-navigateâ Use useNavigate for programmatic navigationnav-relative-pathsâ Understand relative path navigationnav-route-masksâ Use route masks for modal URLs
Code Splitting (Prefix: split-)
split-lazy-routesâ Use .lazy.tsx for code splittingsplit-critical-pathâ Keep critical config in main route filesplit-auto-splittingâ Enable autoCodeSplitting when possible
Preloading (Prefix: preload-)
preload-intentâ Enable intent-based preloadingpreload-stale-timeâ Configure preload stale timepreload-manualâ Use manual preloading strategically
Route Context (Prefix: ctx-)
ctx-root-contextâ Define context at root routectx-before-loadâ Extend context in beforeLoadctx-dependency-injectionâ Use context for dependency injection
How to Use
Each rule file in the rules/ directory contains:
- Explanation â Why this pattern matters
- Bad Example â Anti-pattern to avoid
- Good Example â Recommended implementation
- Context â When to apply or skip this rule
Full Reference
See individual rule files in rules/ directory for detailed guidance and code examples.