tanstack-router by secondsky/claude-skills
npx skills add https://github.com/secondsky/claude-skills --skill tanstack-router使用 TanStack Router 为 React 单页应用构建类型安全、基于文件的路由,并针对 Cloudflare Workers 部署进行优化。
自动触发条件:当你提到以下内容时:
在以下情况下使用此技能:
bun add @tanstack/react-router @tanstack/router-devtools
bun add -d @tanstack/router-plugin
最新版本: v1.134.13(验证于 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(), // 必须在 react() 之前
react(),
],
})
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
// src/routes/__root.tsx
import { createRootRoute, Outlet } from '@tanstack/react-router'
export const Route = createRootRoute({
component: () => (
<div>
<nav>
<Link to="/">首页</Link>
<Link to="/about">关于</Link>
</nav>
<hr />
<Outlet />
</div>
),
})
// src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/')({
component: () => <h1>首页</h1>,
})
// src/routes/about.tsx
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/about')({
component: () => <h1>关于页面</h1>,
})
// src/main.tsx
import { createRouter, RouterProvider } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen' // 自动生成
const router = createRouter({ routeTree })
function App() {
return <RouterProvider router={router} />
}
// 完全类型化!
<Link to="/posts/$postId" params={{ postId: '123' }} />
// 如果路由不存在,TypeScript 会报错
<Link to="/invalid-route" /> // ❌ 错误!
// src/routes/posts.$postId.tsx
export const Route = createFileRoute('/posts/$postId')({
loader: async ({ params }) => {
const post = await fetchPost(params.postId) // 完全类型化!
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>
},
})
问题: 构建失败,提示找不到 @tanstack/router-devtools-core。
解决方案:
bun add @tanstack/router-devtools
问题: 路由未自动生成。
解决方案: TanStackRouterVite 必须在 react() 之前:
plugins: [
TanStackRouterVite(), // 第一个!
react(),
]
问题: Link to 没有类型提示。
解决方案:
// src/routeTree.gen.ts 是自动生成的
// 在 main.tsx 中导入它以注册类型
import { routeTree } from './routeTree.gen'
问题: 导航时加载器函数未被调用。
解决方案: 确保路由导出 Route:
export const Route = createFileRoute('/path')({ loader: ... })
问题: 使用 TanStack Form + Router 时生产环境崩溃。
解决方案: 这是一个已知问题 (#5734)。变通方案:使用 React Hook Form 替代,或等待修复。
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)
}
// 客户端路由
export const Route = createFileRoute('/posts')({
loader: async () => {
const posts = await fetch('/api/posts').then(r => r.json())
return { posts }
},
})
~/.claude/skills/tanstack-router/templates/ 中的所有模板:
~/.claude/skills/tanstack-router/references/ 中的深入指南:
可与以下技能协同工作:
不使用此技能: ~10k 令牌,40-50 分钟,3-4 个错误 使用此技能: ~4k 令牌,15-20 分钟,0 个错误 节省: 60% 令牌,65% 时间
已测试环境:
技术栈兼容性:
最后更新: 2025-11-07 库版本: @tanstack/react-router v1.134.13
每周安装量
90
代码仓库
GitHub 星标数
93
首次出现
2026年1月25日
安全审计
安装于
codex75
gemini-cli74
opencode74
claude-code73
cursor70
github-copilot70
Build 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
Weekly Installs
90
Repository
GitHub Stars
93
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex75
gemini-cli74
opencode74
claude-code73
cursor70
github-copilot70
Tailwind CSS v4 + shadcn/ui 生产级技术栈配置指南与最佳实践
2,600 周安装