Schnellstart

Wenn Sie ungeduldig sind, können Sie das Basic-Beispiel sofort mit den folgenden Befehlen klonen und ausführen.

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

Wenn Sie ein anderes Beispiel verwenden möchten, können Sie start-basic oben durch den Slug des gewünschten Beispiels aus der unten stehenden Liste ersetzen.

Sobald Sie das gewünschte Beispiel geklont haben, kehren Sie zum Leitfaden Grundlagen lernen zurück, um zu erfahren, wie Sie TanStack Start verwenden!

TanStack Start bietet viele Beispiele, um Ihnen den Einstieg zu erleichtern. Wählen Sie eines der folgenden Beispiele aus, um loszulegen!

• 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)

Jedes der obigen Beispiele verfügt über eine eingebettete Stackblitz-Vorschau, um das Beispiel zu finden, das sich als guter Ausgangspunkt anfühlt.

Um ein Beispiel schnell bereitzustellen, klicken Sie auf der Seite eines Beispiels auf die Schaltfläche Deploy to Netlify, um das Beispiel sowohl zu klonen als auch auf Netlify bereitzustellen.

Um das Beispiel manuell zu klonen und woanders bereitzustellen, verwenden Sie die folgenden Befehle und ersetzen Sie EXAMPLE_SLUG durch den Slug des gewünschten Beispiels von oben.

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

Sobald Sie ein Beispiel geklont oder bereitgestellt haben, kehren Sie zum Leitfaden Grundlagen lernen zurück, um zu erfahren, wie Sie TanStack Start verwenden!

Obwohl dies keine spezifischen Start-Beispiele sind, können sie Ihnen helfen, mehr darüber zu erfahren, wie TanStack Router funktioniert.

• Schnellstart (dateibasiert)
• Grundlegend (dateibasiert)
• Kitchen Sink (dateibasiert)
• Kitchen Sink + React Query (dateibasiert)
• Standortmaskierung (Location Masking)
• Authentifizierte Routen
• Scroll-Wiederherstellung
• Verzögerte Daten (Deferred Data)
• Navigationsblockierung
• Ansichtswechsel (View Transitions)
• Mit tRPC
• Mit tRPC + React Query