快速开始

如果你迫不及待想开始，可以直接克隆并运行 基础示例，执行以下命令：

npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic
cd start-basic
npm install
npm run dev

npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic
cd start-basic
npm install
npm run dev

如果想使用其他示例，只需将上述命令中的 start-basic 替换为下方列表中你想要的示例 slug。

克隆完目标示例后，返回 基础教程 学习如何使用 TanStack Start！

TanStack Start 提供了丰富的示例项目助你快速上手。从以下选择一个开始吧：

• 基础 (start-basic)
• 基础 + 鉴权 (start-basic-auth)
• 计数器 (start-counter)
• 基础 + React Query (start-basic-react-query)
• Clerk 鉴权 (start-clerk-basic)
• Convex + Trellaux (start-convex-trellaux)
• Supabase (start-supabase-basic)
• Trellaux (start-trellaux)
• WorkOS (start-workos)
• Material UI (start-material-ui)

每个示例页面都嵌入了 Stackblitz 实时预览，方便你快速找到合适的起点。

点击示例页面上的 Deploy to Netlify 按钮，即可将该示例克隆并部署至 Netlify。

如需手动克隆并部署到其他平台，请使用以下命令（将 EXAMPLE_SLUG 替换为上方示例的 slug）：

npx gitpick TanStack/router/tree/main/examples/react/EXAMPLE_SLUG my-new-project
cd my-new-project
npm install
npm run dev

npx gitpick TanStack/router/tree/main/examples/react/EXAMPLE_SLUG my-new-project
cd my-new-project
npm install
npm run dev

完成克隆或部署后，返回 基础教程 学习如何使用 TanStack Start！

虽然不是 Start 专属示例，但这些项目能帮助你深入理解 TanStack Router 的工作原理：

• 快速开始（基于文件）
• 基础（基于文件）
• 功能大全（基于文件）
• 功能大全 + React Query（基于文件）
• 路径掩码
• 鉴权路由
• 滚动恢复
• 延迟加载数据
• 导航拦截
• 视图过渡
• 结合 tRPC
• 结合 tRPC + React Query