Tanstack Router

{
  "name": "tanstack-router",
  "description": "Build type-safe, file-based React routing with TanStack Router. Supports client-side navigation, route loaders, and TanStack Query integration. Prevents 20 documented errors including validation structure loss, param parsing bugs, and SSR streaming crashes. Use when implementing file-based routing patterns, building SPAs with TypeScript routing, or troubleshooting devtools dependency errors, type safety issues, Vite bundling problems, or Docker deployment issues.",
  "version": "1.0.0",
  "author": {
    "name": "Jeremy Dawes",
    "email": "jeremy@jezweb.net"
  },
  "license": "MIT",
  "repository": "https://github.com/jezweb/claude-skills",
  "keywords": []
}


# 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

```typescript
// 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

| Metric | Without | With | Savings |
|--------|---------|------|---------|
| Tokens | 10k | 4k | **60%** |
| Time | 40-50min | 15-20min | **65%** |
| E