tanstack-router-best-practices
Type-safe routing patterns, data loading strategies, and navigation best practices for TanStack Router in React.
- Covers 33 rules across 10 categories: type safety, route organization, data loading, search params, error handling, navigation, code splitting, preloading, and route context
- Emphasizes type inference through router registration,
fromparameters, and queryOptions integration to prevent runtime errors - Includes data loading patterns with TanStack Query integration, deferred data splitting, and parallel route loading for optimized performance
- Provides search param validation, middleware configuration, and custom serializer setup for type-safe URL state management
- Organized by priority levels (critical, high, medium, low) with quick reference prefixes for easy rule lookup
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
More from deckardger/tanstack-agent-skills
tanstack-start-best-practices
TanStack Start best practices for full-stack React applications. Server functions, middleware, SSR, authentication, and deployment patterns. Activate when building full-stack apps with TanStack Start.
5.9Ktanstack-query-best-practices
TanStack Query (React Query) best practices for data fetching, caching, mutations, and server state management. Activate when building data-driven React applications with server state.
5.7Ktanstack-integration-best-practices
Best practices for integrating TanStack Query with TanStack Router and TanStack Start. Patterns for full-stack data flow, SSR, and caching coordination.
1.4K