маршрутизация страниц

Question

У меня проект на Next.js (App Router) с такой структурой:

app/
  @modal/
    (.)students/
      [id]/page.tsx     // модалка: детальная информация студента (/students/123)
      archive/
        [id]/page.tsx   // модалка: детальная информация архивного 
        студента (/students/archive/123)
    default.tsx

  students/
    [id]/page.tsx       // детальная информация организации
    @list/default.tsx   // список студентов (/students)
    archive/
      [id]/page.tsx     // детальная информация архивного студента
      @list/default.tsx // список архивированных студентов (/students/archive)
      page.tsx
    layout.tsx
    page.tsx
  layout.tsx

app/@modal/default.tsx

export default function DefaultModal() {
  return null;
}

app/layout.tsx

export default async function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en">
      <body>
        <Providers>
          <LayoutClient>
            {children}
          </LayoutClient>
        </Providers>
      </body>
    </html>
  );
}

/app/students/layout.tsx

export default function StudentsLayout({list, children, modal}: {
  list: React.ReactNode;
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <div style={{ position: 'relative' }}>
      {list}
      {children}
      {modal}
    </div>
  );
}

app/students/page.tsx

export default function StudentsPage() {
  return null;
}

app/students/archive/page.tsx

export default function StudentsArchivePage() {
  return null;
}

Если пользователь находится на / и переходит на /students/123, открывается модальное окно app/@modal/(.)students/[id]/page.tsx поверх главной страницы.

Если пользователь переходит на /students/archive, должен открываться список архивных студентов из app/students/archive/@list/default.tsx, но проблема - роутер пытается отрендерить app/@modal/(.)students/[id]/page.tsx, воспринимая archive как id. В результате вместо списка архивных студентов отображается модалка.

Если удалить папку app/@modal, то переход на /students/archive работает корректно (рендерится список архивных студентов). Но тогда ломается сценарий с модалкой для /students/123.

Как правильно организовать структуру роутов в App Router, чтобы:

/students/123 открывал модальное окно поверх списка студентов.
/students/archive всегда открывал список архивных студентов (и не воспринимался как [id]).
/students/archive/123 открывал модальное окно для архивного студента.

БЛОГ НА HUSL

маршрутизация страниц

Ответы (0 шт):