tanstack-router

What problem does it solve?

Managing routing in complex React applications can lead to untyped parameters, manual route definitions, and difficult navigation. This Skill provides patterns for type-safe, file-based routing with TanStack Router.

Core Features & Use Cases

• File-Based Routing: Define routes automatically by file structure, simplifying route management.
• Type Safety: Get full TypeScript inference for route parameters, search parameters, and loader data.
• Route Loaders: Prefetch data before navigation completes, ensuring instant perceived performance.
• Layouts & Guards: Implement shared UI layouts and authentication guards easily.
• Use Case: Set up a /users/:userId route that automatically infers the userId parameter type, prefetches user data using a loader, and displays a loading spinner during data fetch.

Quick Start

Use the tanstack-router skill to set up a new file-based route for /users/$userId.