next.js

Why doesn't intercept route match static route?


I am trying to intercept my /form routes from my [draftVersion] page.
I have outlined my folder structure below (copy and pasted from tree command).

app
├── error.tsx
├── layout.tsx
├── page.tsx
├── [draftVersion]
│   ├── page.tsx
│   ├── layout.tsx
│   └── @modal
│       ├── page.tsx
│       ├── default.tsx
│       ├── [...catchAll]
│       │   └── page.tsx
│       └── (...)form
│           ├── create
│           │   └── page.tsx
│           └── [draftVer]
│               ├── import
│               │   └── page.tsx
│               └── row
│                   └── page.tsx
└── form
    ├── create
    │   └── page.tsx
    └── [draftVer]
        ├── import
        │   └── page.tsx
        └── row
            └── page.tsx

I am able to intercept form/[draftVer]/import and form/[draftVer]/row, when navigating to /form/create its @modal/[...catchall] that intercepts.

After removing @modal/[...catchall] nothing catches form/create.

I tried removing the .next directory and clearing my browser cache, but I can't see to find the problem. Any help would be appreciated.

codesandbox


Solution

  • I had to pull the slots from the dynamic segment.
    Updating my folder structure to

    app
    ├── layout.tsx
    ├── page.tsx
    ├── view
    |   ├── layout.tsx
    |   ├── page.tsx
    |   ├── [draftVersion]
    |   │   ├── page.tsx
    |   │   └── diff
    |   │       └── page.tsx
    |   ├── @modal
    |   │   ├── default.tsx
    |   │   ├── error.tsx
    |   │   ├── page.tsx
    |   │   ├── [...catchAll]
    |   │   │   └── page.tsx
    |   │   └── (...)form
    |   │       ├── create
    |   │       │   └── page.tsx
    |   │       └── [draftVersion]
    |   │           ├── import
    |   │           │   └── page.tsx
    |   │           └── row
    |   │               ├── page.tsx
    |   │               └── [rowId]
    |   │                   └── page.tsx
    |   └── @review
    |       ├── default.tsx
    |       └── [draftVersion]
    |           └── page.tsx
    ├── form
        ├── create
        │   └── page.tsx
        └── [draftVersion]
            ├── import
            │   └── page.tsx
            └── row
                ├── page.tsx
                └── [rowId]
                    └── page.tsx
    

    fixed the issue.

    See https://github.com/vercel/next.js/discussions/81241