Route modal, page not found

[past cave]

I have the following folder structure:

app/[campaignId]/play/@modal/roll/page.tsx

Based on tthe docs, I would expect if I visited the path: /123/play/roll, the modal would be open. However, when I visit that path, I get a page not found error.

Here is my layout.tsx within the play directory:

'use client'
import { CampaignPlayContextProvider } from 'app/providers/CampaignPlayProvider'

export default function PlayLayout({
  children,
  params,
  modal,
}: {
  children: React.ReactNode
  modal: React.ReactNode
  params: {
    campaignId: string
  }
}) {
  return (
    <CampaignPlayContextProvider campaignId={params.campaignId}>
      <div className="self-end">
        {modal}
        {children}
      </div>
    </CampaignPlayContextProvider>
  )
}

What am I doing wrong?

[surreal bobcat]

Hi @past cave. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided, it seems like you're trying to use both dynamic routes and parallel routes with Next.js.

From the Next.js documentation (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes), dynamic routes are defined by enclosing the route segment in square brackets []. In your case, [campaignId] is a dynamic route segment.

Parallel routes, on the other hand, are created using named slots, defined with the @folder convention. In your case, @modal is a parallel route slot.

However, the issue might be related to the Intercepting Routes feature. According to the Next.js documentation (https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes), Intercepting routes allow you to load a new route within the current layout while “masking” the browser URL. They can be defined with the (..) convention, similar to relative paths ../.

In your case, it seems like you're missing the (..) convention in your file structure. The correct structure should be:

app/[campaignId]/play/@modal/(..)roll/page.tsx

This structure indicates that the roll route is relative to the @modal slot, and should be loaded within the current layout when the /123/play/roll path is accessed.

Please try updating your file structure and see if the issue persists. If it does, there might be other factors at play that are not covered in the provided extracts.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@past cave kapa.ai is still learning and improving, please let us know how it did by reacting below

[past cave]

@surreal bobcat That didn't seem to work. Let's start fresh. If I have a [campaignId]/play route, and I want to open a modal at [campaignId]/play/roll, what should my file structure be?

[surreal bobcat]

Let me check the knowledge base for you. One moment! :books:

---

Based on the information provided in the extracts, to open a modal at [campaignId]/play/roll, you should structure your files as follows:

app
├── [campaignId]
│   ├── play
│   │   ├── @modal
│   │   │   ├── roll
│   │   │   │   ├── page.tsx
│   │   ├── page.tsx
│   ├── page.tsx

Here's how it works:

• [campaignId] is a dynamic route segment, which will match any route at this level.
• play is a static route segment, which will only match the /play route.
• @modal is a parallel route slot, which allows you to render a modal in parallel with the main page content.
• roll is a static route segment within the @modal slot, which will only match the /roll route.

In your play/page.tsx file, you should render the modal prop to display the modal content:

export default function PlayPage({ modal }) {
  return (
    <div>
      {/* ... */}
      {modal}
    </div>
  )
}

In your @modal/roll/page.tsx file, you should define the content of the modal:

export default function RollModal() {
  return (
    <div>
      {/* ... */}
    </div>
  )
}

This structure will allow you to open a modal at the [campaignId]/play/roll route, while keeping the user on the [campaignId]/play page.

For more information, you can refer to the Next.js documentation on Parallel Routes (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes) and Intercepting Routes (https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: