Selected 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
Available local rules
This package contains 15 rule files. Consult the official documentation for topics not covered here, matching the installed package version.
- ctx-root-context: Define Context at Root Route
- err-not-found: Handle Not-Found Routes Properly
- load-ensure-query-data: Use ensureQueryData with TanStack Query
- load-parallel: Leverage Parallel Route Loading
- load-use-loaders: Use Route Loaders for Data Fetching
- nav-link-component: Prefer Link Component for Navigation
- nav-route-masks: Use Route Masks for Modal URLs
- org-virtual-routes: Understand Virtual File Routes
- preload-intent: Enable Intent-Based Preloading
- router-default-options: Configure Router Default Options
- search-custom-serializer: Configure Custom Search Param Serializers
- search-validation: Always Validate Search Params
- split-lazy-routes: Use .lazy.tsx for Code Splitting
- ts-register-router: Register Router Type for Global Inference
- ts-use-from-param: Use
fromParameter for Type Narrowing
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.