tanstack-router_skill

Overview

This skill provides best practices for using TanStack Router in React applications to achieve type-safe routing, reliable data loading, and predictable navigation. It consolidates guidance on route organization, search param handling, code splitting, and integration with TanStack Query. Activate this skill when you want maintainable, performant routing for complex app flows.

How this skill works

The skill inspects routing patterns and recommends concrete rules for type registration, route tree structure, loader configuration, and search param typing. It highlights critical conventions (type safety, route organization) and practical patterns for loaders, preloading, error handling, and navigation. Each rule includes rationale, anti-patterns, and recommended implementations to apply during development or refactoring.

When to use it

• Setting up or refactoring application routing and layouts
• Implementing type-safe route params, contexts, and search params
• Configuring data loaders, caching, and TanStack Query integration
• Adding code splitting, lazy routes, and preloading strategies
• Designing navigation UX, link states, and modal/relative routes

Best practices

• Register router types globally to enable compile-time inference and safer refactors
• Organize routes in a hierarchical, file-based structure with pathless layouts for shared UI
• Use route loaders with loaderDeps and ensureQueryData to coordinate server and client cache
• Validate and type search params, inherit parent param types, and provide sensible defaults
• Prefer Link for declarative navigation, use useNavigate for programmatic flows, and handle relative paths explicitly
• Split non-critical route UI with .lazy routes and keep critical routing config in the main route file

Example use cases

• Building a multi-layout dashboard with nested, type-safe routes and shared contexts
• Migrating imperative fetch logic into route loaders that integrate with TanStack Query
• Implementing paginated listings that persist sort and filters via typed search params
• Improving initial load performance by lazy-loading feature routes and intent-based preloads
• Handling 404 and loader errors with a centralized error component and per-route fallbacks