19.09.2023 в 16:49

Устранение неполадок параллельной маршрутизации в Next.js

Параллельная маршрутизация великолепна: она позволяет отображать слот на основе определенных условий, либо статуса аутентификации, либо статуса получения данных.

Если вы раньше не слышали о параллельной маршрутизации и не использовали ее, проверьте это.

Но что-то может пойти не так очень быстро, к счастью, исправления тоже происходят быстро!

В сценарии у вас есть пустая страница с макетом, и вы пытаетесь гидратировать страницу с помощью трех параллельных маршрутов: обзор, проекты и панель мониторинга, чтобы показывать пользователям разные вещи. Но он может сломаться, если у вас есть файловая структура вроде.

|-[workspaceId]
|--create-project
|--settings
|--@overview
|--@projects
|--@dashboard
|--layout.tsx

Проблема 1: отображается пустая страница.

Что ты можешь сделать?

В вашем файле layout.tsx вы уже указали

export default function WorkspaceLayout(props: {

  create: React.ReactNode;
  projects: React.ReactNode;
  overview: React.ReactNode;
}) {
  return (
    <>
     <SomeLayout>
      {props.projects}
        {props.create}
      {props.overview}
    </SomeLayout>
    </>
  );
}

Решение 1.

В этом случае вам понадобится пустой файл page.tsx, например:

export default function DashboardPage(props: {
  params: { workspaceId: string };
}) {
  return <></>;
}

C пустым фрагментом и добавьте неявные дочерние элементы в ваш файл Layout.tsx следующим образом:

export default function WorkspaceLayout(props: {
  children: React.ReactNode;
  create: React.ReactNode;
  projects: React.ReactNode;
  overview: React.ReactNode;
}) {
  return (
    <>
    {props.children} // it really doesn't matter where this is placed because it's nothing in there, 
     <SomeLayout>
      {props.projects}
        {props.create}
      {props.overview}
    </SomeLayout>
    </>
  );
}

Если свойство page.tsx или Children не существует, nextjs не сможет инициализировать этот сегмент.

На этом этапе ваши файлы будут выглядеть так

|-[workspaceId]
|--create-project
|--settings
|--@overview
|--@projects
|--@dashboard
|--layout.tsx
|--page.tx

Проблема 2:

Когда вы переходите к /[someworkspaceId]/create-project, отображается ошибка 404, сообщается, что страница не найдена или внутренняя ошибка сервера.

Что, черт возьми, произошло? У меня есть маршрут туда!

Решение 2.

Создайте отдельную группу макетов.

Вместо файловой структуры, как указано выше, вы могли бы иметь такую структуру:

|-[workspaceId]
|--create-project
|--settings
|--page.tsx
|--layout.tsx
|--(dashboard)
|---@overview
|---@projects
|---@dashboard
|---layout.tsx
|---page.tx

Переместите старый файл layout.tsx в папку (dashboard), но сохраните компонент <SomeLayout/> в папке [workspaceId], и там у вас будут макеты, унаследованные от уровня выше, и маршруты типа /[workspaceId]/create-project снова будут работать. !

У вас есть проблемы с параллельной маршрутизацией и перехватом маршрутов? Нашли решение или нет?

Хотелось бы услышать комментарии 👇🏻

Источник:

Selected Sort Option

#NestJS