TanStack Router Skill

Type-safe, file-based routing for React applications with Cloudflare Workers integration.

Auto-Trigger Keywords

Primary Keywords

• "TanStack Router", "tanstack router", "@tanstack/react-router"
• "type-safe routing", "file-based routing", "React routing TypeScript"
• "route loaders", "data loading routes", "SPA routing"

Feature Keywords

• "virtual file routes", "@tanstack/virtual-file-routes", "programmatic routes"
• "search params validation", "validateSearch", "@tanstack/zod-adapter"
• "beforeLoad", "route guards", "authenticated routes", "protected routes"
• "errorComponent", "route error boundary", "notFoundComponent"

Integration Keywords

• "Cloudflare Workers routing", "TanStack Query integration"
• "route-level data fetching", "prefetch routes"

Error Keywords

• "routeTree.gen.ts missing", "route type inference not working"
• "loader not running", "TanStack Form memory leak"
• "virtual routes conflict", "validateSearch page reload"

What This Provides

🎯 Core Features

• Type-safe navigation - Compile-time route validation
• File-based routing - Automatic route generation from file structure
• Virtual file routes - Programmatic route configuration (v1.140+)
• Route loaders - Data fetching at route level
• Search params validation - Zod adapter with type safety
• Error boundaries - Route-level error handling with reset
• beforeLoad guards - Authentication without content flash
• TanStack Query integration - Coordinate routing + data fetching
• Cloudflare Workers ready - Deploy SPAs to Workers + Static Assets

📦 Templates (7)

1. package.json - Dependencies
2. vite.config.ts - Plugin setup
3. basic-routes/ - File structure example
4. route-with-loader.tsx - Data loading
5. query-integration.tsx - TanStack Query
6. nested-routes/ - Layouts
7. cloudflare-deployment.md - Workers guide

📚 Reference Docs (6)

1. File-based routing conventions
2. TypeScript type safety patterns
3. Data loading with loaders
4. Cloudflare Workers deployment
5. Common errors (7+)
6. 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' }} />

11 Errors Prevented

1. Devtools dependency resolution
2. Vite plugin ordering (CRITICAL)
3. Type registration missing
4. Loader not running
5. Memory leaks with TanStack Form (known issue #5734)
6. Middleware undefined errors
7. API route errors after restart
8. Virtual routes index/layout conflict (#5421)
9. Search params type inference regression (#3100)
10. TanStack Start validators on reload (#3711)
11. Flash of protected content (beforeLoad pattern)

Token Efficiency

Installation

npm install @tanstack/react-router @tanstack/router-devtools
npm install -D @tanstack/router-plugin
# Optional: Search params validation
npm install @tanstack/zod-adapter zod
# Optional: Virtual file routes
npm install @tanstack/virtual-file-routes

Latest: v1.144.0

Version: 1.1.0 | Last Updated: 2026-01-03