tanstack-router

Create type-safe file-based routes for React and Solid apps.

Updated Jan 24, 2026
One-click install
npx skills add https://github.com/Ikki-Group/erp --skill tanstack-router-ikki-group
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-router
Source: https://github.com/Ikki-Group/erp/tree/main/.agents/skills/tanstack-router
Command: npx skills add https://github.com/Ikki-Group/erp --skill tanstack-router-ikki-group

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Type-safe routing for React and Solid applications with built-in data loading and first-class search param management, enabling robust navigation and scalable app architecture.

Core Features & Use Cases

  • Fully type-safe routing for React and Solid with file-based routing
  • Built-in data loading, search param handling, and code-splitting
  • Deep TypeScript integration and ecosystem tooling

Quick Start

Install the TanStack Router package and define routes using createFileRoute, then render your app with a RouterProvider.

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 React applications?

Type-safe routing for React applications is set up using file-based routing via createFileRoute and RouterProvider. This approach enables deep TypeScript inference across navigation and route definitions, ensuring robust and scalable app architecture.

What is file-based routing and how do route loaders work?

File-based routing defines routes via createFileRoute, while route loaders use beforeLoad to fetch data before navigation. This mechanism supports built-in data loading, search param handling, and code-splitting for modern web apps.

Does TanStack Router work with Solid apps or is it only for React?

Yes, TanStack Router supports Solid applications, providing fully type-safe routing and built-in data loading. It integrates seamlessly with the TanStack ecosystem to manage navigation and search params robustly.

How do I manage search params and validation in React routing?

Search param management and validation are handled natively through the router's built-in search validation. This provides first-class, type-safe handling of URL search parameters during navigation.

Can I use route guards for access control in a TypeScript React app?

Route guards for access control are implemented using the beforeLoad loaders. This allows you to execute logic before a route is loaded, enabling robust navigation protection and data fetching within your TypeScript application.