Работаю с 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}
</>
);
}
Простой
Средний
