tanstack-router

Generate type-safe file-based route trees for React and Solid apps.

Updated Feb 24, 2026

Search Tags:#react #routing #navigation #typesafe #tanstack-router #loader #file-based-routing

Ready to run

npx skills add https://github.com/bartolomeomueller/hr --skill tanstack-router-bartolomeomueller

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-router
Source: https://github.com/bartolomeomueller/hr/tree/main/.agents/skills/tanstack-router
Command: npx skills add https://github.com/bartolomeomueller/hr --skill tanstack-router-bartolomeomueller

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Router provides a type-safe routing layer for React and Solid applications, delivering a robust foundation with file-based routing, first-class search param management, built-in data loading, and deep TypeScript integration.

Core Features & Use Cases

File-based routing that auto-generates a route tree from your project structure.
Type-safe parameters and search validation, with loader integration, preloading, and data fetching.
Seamless navigation and route guards via beforeLoad, notFound and pending components.
Use cases include large admin dashboards, multi-role apps, and apps requiring dynamic routing and data loading.

Quick Start

Create a minimal root route and a nested route in a React app using TanStack Router to bootstrap 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 for a React app?▼

Type-safe routing for React apps is set up using file-based routing to auto-generate a route tree from your project structure, integrating deeply with TypeScript to validate parameters and manage search params.

How do I handle data loading and preloading with React routing?▼

Data loading and preloading in React routing are handled through built-in loader patterns, allowing you to fetch data directly within route configurations before rendering components.

Can I use TanStack Router for building large admin dashboards?▼

Yes, TanStack Router is suitable for large admin dashboards and multi-role apps, providing dynamic routing, route guards via beforeLoad, and comprehensive navigation primitives.

What is the best way to manage search parameters in a React application?▼

The best way to manage search parameters in a React application is using a type-safe router that offers first-class search param management with built-in validation and seamless integration.

Does this type-safe router work with Solid apps?▼

Yes, this type-safe routing layer supports both React and Solid applications, delivering file-based routing, data loading, and deep TypeScript integration across modern front-end projects.

How do I implement route guards and notFound components in React?▼

Route guards and notFound components are implemented using the beforeLoad lifecycle hook within your route configuration to control access and render fallback UI for unmatched paths.