tanstack-router

Generate file-based routes for React apps with TanStack Router.

Updated Nov 19, 2025

Search Tags:#web development #frontend #react #routing #data loading #tanstack router

Ready to run

npx skills add https://github.com/alexturpin/cf-app-starter --skill tanstack-router-alexturpin

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-router
Source: https://github.com/alexturpin/cf-app-starter/tree/main/.opencode/skills/tanstack-router
Command: npx skills add https://github.com/alexturpin/cf-app-starter --skill tanstack-router-alexturpin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the process of defining and managing routes in React applications by leveraging a file-based convention, reducing boilerplate code and improving developer experience.

Core Features & Use Cases

File-based Routing: Automatically generates routes based on file structure within src/routes.
Dynamic Segments: Supports dynamic route parameters (e.g., $userId).
Layout Routes: Enables creation of nested layouts for consistent UI structure.
Data Loading: Integrates with data fetching libraries for prefetching and suspenseful data loading.
Use Case: Quickly scaffold a new feature with multiple nested routes and associated data fetching logic by simply creating files in the correct directory structure.

Quick Start

Create a new route by adding a file named about.tsx inside the src/routes directory.

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 file-based routing in React?▼

File-based routing in React is set up by creating route files inside a `src/routes` directory. The convention automatically generates routes based on the file structure, reducing boilerplate code and improving developer experience.

How do I handle dynamic route segments in React applications?▼

Dynamic route segments in React applications are handled using specific file naming conventions like `$userId`. This structure supports dynamic route parameters and manages their definitions automatically within the file-based routing system.

What's the best way to prefetch data for React routes on the server?▼

Prefetching data for React routes on the server is best done using `ensureQueryData`. This strategy integrates with data fetching libraries to prefetch data, allowing client-side consumption via `useSuspenseQuery`.

Does TanStack Router support nested layouts in React?▼

TanStack Router supports nested layouts in React through layout routes. This enables the creation of nested layouts for consistent UI structure across multiple route files in your application directory.

How do I scaffold a new React feature with nested routes and data loading?▼

Scaffolding a new React feature with nested routes and data loading is done by creating files in the correct directory structure. Adding files to `src/routes` automatically manages route definitions, layout routes, and associated data fetching logic.