tanstack-router

Name: tanstack-router
Availability: InStock
Author: Pelith

Create type-safe file-based routes with loaders for React applications.

Updated Feb 2, 2026

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

Ready to run

npx skills add https://github.com/pelith/Project-Remora-Frontend --skill tanstack-router-pelith

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Router provides type-safe, file-based routing for React apps, reducing runtime routing errors and enabling strong data loading with loaders.

Core Features & Use Cases

Type-safe navigation and route definitions based on the filesystem.
Data loading per route via loader functions with optional TanStack Query integration.
Works with nested layouts, error boundaries, and guards like beforeLoad, as well as search param validation.

Quick Start

Install required packages: npm install @tanstack/react-router @tanstack/router-plugin
Create your routes under a routes/ directory with __root.tsx and route files, then generate a routeTree.gen.ts.
Import routeTree and use RouterProvider to boot the app.

Frequently Asked Questions about tanstack-router

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

FAQPage Schema

How do I add type-safe file-based routing to a React SPA?▼

Type-safe file-based routing in a React SPA is achieved by defining routes in a directory structure, generating a route tree, and using a RouterProvider to boot the app. This enforces type safety and reduces runtime errors.

How do I load data per route in a React SPA using file-based routing?▼

Data loading per route is handled via loader functions integrated within file-based routing. You can optionally pair these loaders with TanStack Query to fetch and manage route data efficiently across your project.

Does file-based React routing work with nested layouts and error boundaries?▼

Yes, file-based React routing supports nested layouts and error boundaries natively. It also includes route guards like beforeLoad and search param validation to protect and manage route access securely.

What is the best way to prevent runtime routing errors in scalable React applications?▼

The best way to prevent runtime routing errors is using type-safe, file-based route definitions derived from the filesystem. This approach eliminates unsafe, ad-hoc routing and ensures navigation paths are validated.

Do I need TanStack Query to use type-safe file-based routing in React?▼

No, TanStack Query is optional for type-safe file-based routing in React. Route loaders can function independently, but integrating TanStack Query provides enhanced data fetching and caching capabilities.