tanstack-router

Provide type-safe file-based routing with loaders for React and Solid apps.

117|11|Updated Aug 19, 2025
One-click install
npx skills add https://github.com/bskimball/tanstack-hono --skill tanstack-router-bskimball
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-router
Source: https://github.com/bskimball/tanstack-hono/tree/main/.agents/skills/tanstack-router
Command: npx skills add https://github.com/bskimball/tanstack-hono --skill tanstack-router-bskimball

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Router provides a fully type-safe, file-based routing solution for React and Solid applications, unifying routing with data loading, first-class search params, and TypeScript integration to prevent runtime errors and improve developer experience.

Core Features & Use Cases

  • Type-safe route definitions with validated params and search schemas.
  • File-based routing that auto-generates the route tree, supports code splitting, loaders, and guards.
  • Data loading and navigation utilities with loaders, suspense, preloading, and not-found/error handling for robust UIs.
  • Use cases include building SEO-friendly SSR apps, complex dashboards, and multi-tenant SPAs with strong typing across routes.

Quick Start

Install the router in your project and create a minimal routes directory under src/routes to start exploring type-safe file-based routing.

Frequently Asked Questions about tanstack-router

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up type-safe routing in a React or Solid application?

To set up type-safe routing, install the router and create a minimal routes directory under src/routes to auto-generate the route tree. This applies validated params and search schemas to prevent runtime errors in React or Solid.

What is file-based routing and how does it handle data loading?

File-based routing auto-generates the route tree from a routes directory, supporting code splitting, guards, and loaders. Loaders fetch data during navigation, enabling robust UIs with suspense, preloading, and built-in error handling.

Can I use this router for SSR and complex multi-tenant SPAs?

Yes, you can use this router for SEO-friendly SSR apps, complex dashboards, and multi-tenant SPAs. It provides strong TypeScript integration across routes, handling data loading and navigation utilities for both client and server rendering.

Does TanStack Router support search param validation and typed route params?

Yes, TanStack Router provides type-safe route definitions with validated params and first-class search schemas. This ensures typed route params and search params are strictly checked during navigation to prevent runtime errors.

What is the best way to handle errors and not-found pages during data loading?

The best way to handle errors and not-found pages is using the router's built-in error handling and not-found boundaries during data loading. These features integrate with loaders and suspense to build robust, resilient UIs.