快速开始

如果您等不及了，可以使用以下命令立即克隆并运行 Basic 示例：

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 替换为您想要使用的示例的标识符，从下面的列表中选择。

克隆您想要的示例后，请返回学习基础知识指南来学习如何使用 TanStack Start！

TanStack Start 有大量示例帮助您开始。从下面的示例中选择一个开始吧！

• Basic (start-basic)
• Basic + Auth (start-basic-auth)
• Counter (start-counter)
• Basic + React Query (start-basic-react-query)
• Clerk Auth (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 替换为您想要使用的上述示例的标识符：

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 的工作原理：

• Quickstart (file-based)
• Basic (file-based)
• Kitchen Sink (file-based)
• Kitchen Sink + React Query (file-based)
• Location Masking
• Authenticated Routes
• Scroll Restoration
• Deferred Data
• Navigation Blocking
• View Transitions
• With tRPC
• With tRPC + React Query