Cursor TanStack 编码规范：来自 PatrickJS/awesome-cursorrules (40k stars) 的 tan，适用于各类文档与内容的智能化处理。
Cursor TanStack 编码规范：来自 PatrickJS/awesome-cursorrules (40k stars) 的 tan，适用于各类文档与内容的智能化处理。
**文件来源:** PatrickJS/awesome-cursorrules → `rules/tanstack-router-react-cursorrules-prompt-file.mdc`
**原仓库:** https://github.com/PatrickJS/awesome-cursorrules
**评分:** ⭐ 仓库 40k stars (社区最权威 Cursor rules 合集)
把 `tanstack-router-react-cursorrules-prompt-file.mdc` 这条 Cursor 编码规则打包成可调用的 AI skill,帮你把代码生成统一到一致的标准上。
> Cursor rules for TanStack Router v1 with file-based routing, typed params, search validation, loaders, auth guards, and route preloading.
globs: **/*
alwaysApply: false
---
You are an expert in TanStack Router, React, TypeScript, and modern type-safe client-side routing.
# TanStack Router + React Guidelines
## Core Philosophy
- TanStack Router is 100% type-safe — leverage TypeScript generics for route params, search params, and loader data
- Prefer file-based routing for scalability; use code-based routing only for highly dynamic use cases
- Always define routes with `createFileRoute` or `createRootRoute` — never use plain objects
- Route data loading belongs in `loader` functions, not in component `useEffect`
- Search params are first-class citizens — define their schema with Zod or Valibot for validation and type inference
## Project Setup
- Use `@tanstack/react-router` with Vite and the `@tanstack/router-vite-plugin` for file-based routing
- Enable `routeTree.gen.ts` auto-generation — never manually edit this file
- Structure routes under `src/routes/` directory
- Root layout goes in `src/routes/__root.tsx`
- Use `src/routes/index.tsx` for the home/index route
## File-Based Route Conventionssrc/routes/
__root.tsx ← Root layout (wraps all routes)
index.tsx ← / route
about.tsx ← /about route
posts/
index.tsx ← /posts route
$postId.tsx ← /posts/:postId (dynamic segment)
_layout.tsx ← Layout route (no path segment)
_auth/
login.tsx ← /login (grouped under auth layout)
(admin)/
dashboard.tsx ← /dashboard (pathless group)
## Route Definition Patterns// src/routes/posts/$postId.tsx
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/posts/$postId')({
loader: async ({ params }) => {
return fetchPost(params.postId) // fully typed params
},
component: PostComponent,
})
function PostComponent() {
const post = Route.useLoaderData() // type-safe loader data
const { postId } = Route.useParams() // type-safe params
return <div>{post.title}</div>
}
## Type-Safe Search Params
- Always define search param schemas using `z.object()` from Zod
- Use `validateSearch` option on route definition
- Access with `Route.useSearch()` — never read raw `window.location.search`import { z } from 'zod'
import { createFileRoute } from '@tanstack/react-router'
const searchSchema = z.object({
page: z.number().int().min(1).default(1),
q: z.string().optional(),
})
export const Route = createFileRoute('/search')({
validateSearch: searchSchema,
component: SearchPage,
})
function SearchPage() {
const { page, q } = Route.useSearch()
// ...
}
## Navigation
- Use `<Link>` from `@tanstack/react-router` — never `<a href>` for internal navigation
- Use `useNavigate()` for programmatic navigation
- Always pass typed `params` and `search` to Link — the compiler will catch mistakesimport { Link, useNavigate } from '@tanstack/react-router'
// Declarative
<Link to="/posts/$postId" params={{ postId: '123' }}>View Pos
...(完整内容在原仓库)...
## 数据来源
- 仓库: PatrickJS/awesome-cursorrules (40,581 stars, 257 个 .mdc 规则)
- 抓取时间: 2026-08-17
- License: 跟随原仓库(MIT)
## 联系方式
有问题或建议,在本 skill 下留言。把 `tanstack-router-react-cursorrules-prompt-file.mdc` 这条 Cursor 编码规则打包成可调用的 AI skill,帮你把代码生成统一到一致的标准上。
> Cursor rules for TanStack Router v1 with file-based routing, typed params, search validation, loaders, auth guards, and route preloading.