@Jeux_Onmobil

Почему не работает параллельный роутинг next js 14?

Работаю с Next.js 14+ и пытаюсь реализовать параллельные маршруты так, чтобы модалка рендерилась поверх страницы CRM при переходе на маршрут /crm/message. Задача — чтобы модальное окно отображалось поверх основного контента CRM, а страница оставалась на фоне (с возможностью добавить эффект блюра)

Структура проекта:
app
└── crm
    ├── layout.tsx         // Layout для CRM и модалки
    ├── page.tsx           // Основная страница CRM
    └── @modal
        └── message
            └── page.tsx   // Контент модалки для /crm/message
        ├── default.tsx


При переходе на /crm/message я вижу модальное окно, но на заднем фоне — пустота, и страница CRM не рендерится. Если открывать /crm, то всё работает корректно. Пробовал разные варианты структуры папок для маршрута, но все равно получаю 404 ошибку или отсутствие рендера страницы.

layout.tsx:
export default function CRMLayout({ children, modal }: { children: React.ReactNode; modal: React.ReactNode }) {
    return (
        <>
            {children}
            {modal}
        </>
    );
}
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ответы на вопрос 1
Это работает совсем не так. В вашей структуре @modal - это слот в layout, у него нет отдельного URL.
However, slots are not route segments and do not affect the URL structure. For example, for /@analytics/views, the URL will be /views since @analytics is a slot.
https://nextjs.org/docs/app/building-your-applicat...

Вам же нужно читать следующий раздел на этой же странице: https://nextjs.org/docs/app/building-your-applicat...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы