Условная маршрутизация с правильной структурой макета ⇐ Javascript

[Anonymous]

Я настроил приложение TanStack Start, используя: npm create @tanstack/start@latest:

Код: Выделить всё

┌  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

Я хочу иметь в своем проекте два основных макета, чтобы поддерживать единообразную структуру дизайна:

• Код: Выделить всё

  AuthLayout

  : для всех страниц, связанных с аутентификацией (вход, регистрация и т. д.).

• Код: Выделить всё

  DashboardLayout

  : Для всех защищенных страниц (после входа в систему).

Желаемая структура маршрутизации:

• Маршруты аутентификации
  
  
  
  Страница
  Путь
  
  
  
  
  Войти

  Код: Выделить всё

  /

  
  Регистрация

  Код: Выделить всё

  /signup

  
  Забыть пароль

  Код: Выделить всё

  /forget-password

• Маршруты информационной панели
  
  
  
  Страница
  Путь
  
  
  
  
  Главная панель управления

  Код: Выделить всё

  /

  
  Пользователи

  Код: Выделить всё

  /user

Я изо всех сил пытаюсь условно отобразить правильный макет (либо AuthLayout, либо DashboardLayout) на базовом маршруте (

Код: Выделить всё

/

) в зависимости от того, аутентифицирован ли пользователь.
В основном:

• Если пользователь не аутентифицирован → показать AuthLayout на странице входа в систему
• Если пользователь аутентифицирован → показать DashboardLayout на странице панели мониторинга

Я пробовал несколько подходов, но не смог заставить их работать с createFileRoute.
Как структурировать мои файлы и маршруты, чтобы добиться такой настройки макета в TanStack Start?

Подробнее здесь: https://stackoverflow.com/questions/798 ... -structure