tanstack-router

Name: tanstack-router
Availability: InStock
Author: tkgstrator

Generates file-based TanStack Router routes and typed parameters for Vite+React SPAs via the @tanstack/router-plugin.

1|Updated Apr 18, 2026

Search Tags:#react #routing #vite #tanstack-router #file-based-routing #router-plugin #typed-params

Ready to run

npx skills add https://github.com/tkgstrator/KotoTV --skill tanstack-router-tkgstrator

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

File-based routing with TanStack Router can be hard to wire and keep in sync with filesystem changes. This Skill outlines using the @tanstack/router-plugin to generate routes from files under src/routes, enabling typed params and loaders integrated with TanStack Query for a cohesive development experience.

Core Features & Use Cases

File-based routing: generate route trees from src/routes using the TanStack Router plugin.
Typed params and loaders: integrate with TanStack Query for type-safe data fetching and navigation.
Route synchronization: keep routeTree.gen.ts in sync with filesystem changes during development and build.

Quick Start

Install the required TanStack Router plugins and configure the Vite setup to generate routes from src/routes.

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 with TanStack Router in a Vite React SPA?▼

To set up file-based routing with TanStack Router in a Vite React SPA, install the required TanStack Router plugins and configure Vite to generate route trees from files under your src/routes directory.

How does the TanStack Router plugin keep routeTree.gen.ts in sync with my files?▼

The TanStack Router plugin keeps routeTree.gen.ts in sync by automatically regenerating the route tree, loaders, and navigation utilities during development and build whenever filesystem changes occur in src/routes.

Can I integrate TanStack Query for type-safe data fetching with TanStack Router?▼

Yes, you can integrate TanStack Query with TanStack Router to enable type-safe data fetching and navigation by using typed params and loaders generated from your file-based route definitions.

Does TanStack Router support typed parameters for file-based routes?▼

TanStack Router supports typed parameters by using the @tanstack/router-plugin to generate type-safe route trees, loaders, and navigation utilities directly from the file structure under src/routes.

What is the best way to organize React routes when using the TanStack Router plugin?▼

The best way to organize React routes with the TanStack Router plugin is placing your route files under a designated src/routes directory so the plugin can automatically generate the cohesive route tree.

Why does my TanStack Router setup not reflect new route files in the SPA?▼

Your TanStack Router setup might not reflect new route files because routeTree.gen.ts needs regeneration through the configured Vite plugin to keep routes synchronized with the current filesystem.