secondsky/tanstack-router
TanStack Router type-safe file-based routing for React. Use for SPAs, TanStack Query integration, Cloudflare Workers, or encountering devtools, type safety, loader, Vite bundling errors.
npx skills add https://github.com/secondsky/claude-skills --skill tanstack-routerBuild type-safe, file-based routing for React SPAs with TanStack Router, optimized for Cloudflare Workers deployment.
Auto-triggers when you mention:
Use this skill when:
bun add @tanstack/react-router @tanstack/router-devtools
bun add -d @tanstack/router-plugin
Latest version: v1.134.13 (verified 2025-11-07)
// 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(),
],
})
// 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 { routeTree } from './routeTree.gen' // Auto-generated
const router = createRouter({ routeTree })
function App() {
return <RouterProvider router={router} />
}
// Fully typed!
<Link to="/posts/$postId" params={{ postId: '123' }} />
// TypeScript error if route doesn't exist
<Link to="/invalid-route" /> // ❌ Error!
// src/routes/posts.$postId.tsx
export const Route = createFileRoute('/posts/$postId')({
loader: async ({ params }) => {
const post = await fetchPost(params.postId) // Fully typed!
return { post }
},
component: ({ useLoaderData }) => {
const { post } = useLoaderData()
return <h1>{post.title}</h1>
},
})
import { queryOptions } from '@tanstack/react-query'
const postQueryOptions = (postId: string) =>
queryOptions({
queryKey: ['posts', postId],
queryFn: () => fetchPost(postId),
})
export const Route = createFileRoute('/posts/$postId')({
loader: ({ context: { queryClient }, params }) =>
queryClient.ensureQueryData(postQueryOptions(params.postId)),
component: () => {
const { postId } = Route.useParams()
const { data: post } = useQuery(postQueryOptions(postId))
return <h1>{post.title}</h1>
},
})
Problem: Build fails with @tanstack/router-devtools-core not found.
Solution:
bun add @tanstack/router-devtools
Problem: Routes not auto-generated.
Solution: TanStackRouterVite MUST come before react():
plugins: [
TanStackRouterVite(), // First!
react(),
]
Problem: Link to not typed.
Solution:
// src/routeTree.gen.ts is auto-generated
// Import it in main.tsx to register types
import { routeTree } from './routeTree.gen'
Problem: Loader function not called on navigation.
Solution: Ensure route exports Route:
export const Route = createFileRoute('/path')({ loader: ... })
Problem: Production crashes when using TanStack Form + Router.
Solution: This is a known issue (#5734). Workaround: Use React Hook Form instead, or wait for fix.
import { defineConfig } from 'vite'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
import { cloudflare } from '@cloudflare/vite-plugin'
export default defineConfig({
plugins: [
TanStackRouterVite(),
react(),
cloudflare(),
],
})
// functions/api/posts.ts
export async function onRequestGet({ env }) {
const { results } = await env.DB.prepare('SELECT * FROM posts').all()
return Response.json(results)
}
// Client-side route
export const Route = createFileRoute('/posts')({
loader: async () => {
const posts = await fetch('/api/posts').then(r => r.json())
return { posts }
},
})
All templates in ~/.claude/skills/tanstack-router/templates/:
Deep-dive guides in ~/.claude/skills/tanstack-router/references/:
Works with:
Without skill: ~10k tokens, 40-50 min, 3-4 errors
With skill: ~4k tokens, 15-20 min, 0 errors
Savings: 60% tokens, 65% time
Tested with:
Stack compatibility:
Last Updated: 2025-11-07
Library Version: @tanstack/react-router v1.134.13
Take secondsky/tanstack-router from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.