Why is the modal not appearing when using a parallel route?
Unanswered
JM posted this in #help-forum
JMOP
Hello. I've created a folder structure as shown in the image. I'm trying to set up parallel routing for @modal's page.tsx and [resultId]'s page.tsx under the /result/[resultId] path. However, the modal is not displaying as expected. I'm struggling with parallel routing, and I would appreciate your help. Thank you.
router
/(result)/result/layout.tsx
router
L (result)
L result
@modal
L default.tsx
L page.tsx
@result
L [resultId]
L page.tsx
default.tsx
layout.tsx
/(result)/result/layout.tsx
export default async function ResultLayout(props: {
children: React.ReactNode;
modal: React.ReactNode;
result: React.ReactNode;
}) {
return (
<>
{props.modal}
<NavBar />
<main>
{props.children}
{props.result}
</main>
<Footer />
</>
);
}