tanstack-router

What problem does it solve?

This Skill provides a structured approach to implementing type-safe, file-based routing in React applications using TanStack Router, enabling scalable route definitions and predictable navigation.

Core Features & Use Cases

• Type-safe route definitions via file-based routes that map to the filesystem
• Dynamic and typed params support, including nested and index routes
• Layouts, route guards, loaders, and error handling for robust UI flows
• Programmatic navigation and preloading to optimize user experiences
• Code-splitting with route.lazy.tsx for performance
• Use Case: build a multi-page admin interface with shared layouts and dynamic user pages

Quick Start

Install @tanstack/react-router and create a routes directory (e.g., src/routes/). Create files like src/routes/index.tsx, src/routes/about.tsx, and dynamic routes such as src/routes/users/$userId.tsx. Use createFileRoute to declare routes, and Link/useNavigate for navigation.