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> ...