Bedingtes Routing mit korrekter Layoutstruktur [geschlossen] ⇐ JavaScript

[Anonymous]

Ich habe eine TanStack Start-App eingerichtet mit: npm create @tanstack/start@latest:

Code: Select all

┌  Let's configure your TanStack Start application
│
◇  What would you like to name your project?
│  frontend
│
◇  Would you like to use Tailwind CSS?
│  Yes
│
◇  Select toolchain
│  ESLint
│
◇  What add-ons would you like for your project?
│  Shadcn, Table, Query
│
◇  Would you like any examples?
│  none
│
◇  Initialized git repository

Ich möchte in meinem Projekt zwei Hauptlayouts haben, um eine konsistente Designstruktur beizubehalten:

• Code: Select all

  AuthLayout

  : Für alle authentifizierungsbezogenen Seiten (Anmeldung, Registrierung usw.)

• Code: Select all

  DashboardLayout

  : Für alle geschützten Seiten (nach Anmeldung)

Gewünschte Routingstruktur:

• Auth-Routen
  
  
  
  Seite
  Pfad
  
  
  
  
  Anmelden

  Code: Select all

  /

  
  Anmelden

  Code: Select all

  /signup

  
  Passwort vergessen

  Code: Select all

  /forget-password

• Dashboard-Routen
  
  
  
  Seite
  Pfad
  
  
  
  
  Dashboard-Startseite

  Code: Select all

  /

  
  Benutzer

  Code: Select all

  /user

Ich habe Schwierigkeiten, das richtige Layout (entweder AuthLayout oder DashboardLayout) auf der Basisroute bedingt darzustellen (

Code: Select all

/

), abhängig davon, ob der Benutzer authentifiziert ist.
Grundsätzlich:

• Wenn der Benutzer nicht authentifiziert ist → AuthLayout mit der Anmeldeseite anzeigen
• Wenn der Benutzer authentifiziert ist → DashboardLayout mit der Dashboard-Seite anzeigen

Ich habe mehrere Ansätze ausprobiert, konnte es aber nicht zum Laufen bringen createFileRoute.
Wie strukturiere ich meine Dateien und Routen, um dieses Layout-Setup in TanStack zu erreichen? Beginnen Sie mit dem Tanstack-Router?