
Tanstack Router
- 196 repo stars
- Updated July 25, 2026
- secondsky/claude-skills
Add type-safe file-based routing to React SPAs with TanStack Router, integrated with TanStack Query.
About
TanStack Router provides type-safe, file-based routing for React. Developers use it for SPAs and TanStack Query integration, and to resolve devtools, type-safety, loader, and Vite bundling errors.
- TanStack Router
- Type-safe file-based routing
- TanStack Query integration
- Loaders + devtools
Tanstack Router by the numbers
- Data as of Jul 28, 2026 (Skillselion catalog sync)
/plugin marketplace add secondsky/claude-skills/plugin install tanstack-router@claude-skillsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| repo stars | ★ 196 |
|---|---|
| Last updated | July 25, 2026 |
| Repository | secondsky/claude-skills ↗ |
What it does
Add type-safe file-based routing to React SPAs with TanStack Router, integrated with TanStack Query.
README.md
TanStack Router Skill
Type-safe, file-based routing for React applications with Cloudflare Workers integration.
Auto-Trigger Keywords
- "TanStack Router", "type-safe routing", "file-based routing"
- "React routing TypeScript", "route loaders", "data loading routes"
- "Cloudflare Workers routing", "SPA routing"
What This Provides
🎯 Core Features
- Type-safe navigation - Compile-time route validation
- File-based routing - Automatic route generation from file structure
- Route loaders - Data fetching at route level
- TanStack Query integration - Coordinate routing + data fetching
- Cloudflare Workers ready - Deploy SPAs to Workers + Static Assets
📦 Templates (7)
- package.json - Dependencies
- vite.config.ts - Plugin setup
- basic-routes/ - File structure example
- route-with-loader.tsx - Data loading
- query-integration.tsx - TanStack Query
- nested-routes/ - Layouts
- cloudflare-deployment.md - Workers guide
📚 Reference Docs (6)
- File-based routing conventions
- TypeScript type safety patterns
- Data loading with loaders
- Cloudflare Workers deployment
- Common errors (7+)
- Migration from React Router
Quick Example
// src/routes/posts.$postId.tsx
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/posts/$postId')({
loader: async ({ params }) => {
const post = await fetch(`/api/posts/${params.postId}`).then(r => r.json())
return { post }
},
component: function Post() {
const { post } = Route.useLoaderData()
return <h1>{post.title}</h1>
},
})
// Usage: Fully typed!
<Link to="/posts/$postId" params={{ postId: '123' }} />
7 Errors Prevented
- Devtools dependency resolution
- Vite plugin ordering
- Type registration missing
- Loader not running
- Memory leaks (known issue)
- Middleware undefined errors
- API route errors after restart
Installation
npm install @tanstack/react-router @tanstack/router-devtools
npm install -D @tanstack/router-plugin
Latest: v1.134.13
Version: 1.0.0 | Last Updated: 2025-11-07
Related skills
Frontend Developmentfrontend