Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
Claude Skills Maintainers avatar

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

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
repo stars196
Last updatedJuly 25, 2026
Repositorysecondsky/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)

  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' }} />

7 Errors Prevented

  1. Devtools dependency resolution
  2. Vite plugin ordering
  3. Type registration missing
  4. Loader not running
  5. Memory leaks (known issue)
  6. Middleware undefined errors
  7. 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

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.