tanstack-router

# TanStack Router Skill

Build type-safe, file-based routing for React SPAs with TanStack Router, optimized for Cloudflare Workers deployment.

---

## When to Use This Skill

**Auto-triggers when you mention:**
- "TanStack Router" or "type-safe routing"
- "file-based routing" or "route configuration"
- "React routing" with TypeScript emphasis
- "route loaders" or "data loading in routes"
- "Cloudflare Workers routing"

**Use this skill when:**
- Building SPAs with type-safe navigation
- Implementing file-based routing (like Next.js)
- Need route-level data loading
- Integrating routing with TanStack Query
- Deploying to Cloudflare Workers
- Want better TypeScript support than React Router

---

## Quick Start

### Installation

```bash
bun add @tanstack/react-router @tanstack/router-devtools
bun add -d @tanstack/router-plugin
```

**Latest version:** v1.134.13 (verified 2025-11-07)

### Vite Configuration

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'

export default defineConfig({
  plugins: [
    TanStackRouterVite(), // MUST come before react()
    react(),
  ],
})
```

### Basic Setup

```typescript
// src/routes/__root.tsx
import { createRootRoute, Outlet } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: () => (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <hr />
      <Outlet />
    </div>
  ),
})

// src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: () => <h1>Home Page</h1>,
})

// src/routes/about.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/about')({
  component: () => <h1>About Page</h1>,
})

// src/main.tsx
import { createRouter, RouterProvider } from '@tanstack/react-router'
import { ro