next.js: [NEXT-1166] Modal Interception does not work for (.)[dynamic] routes
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:37 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6000
Binaries:
Node: 18.14.0
npm: 9.3.1
Yarn: 1.22.19
pnpm: 7.27.0
Relevant packages:
next: 13.4.2-canary.4
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue
https://codesandbox.io/p/sandbox/youthful-butterfly-l44fsy
To Reproduce
- Go to sandbox and run the dev server.
- Click on the “Photos” link
- Click on “Go to /photos/[author]/[id]”, where the author and id is “john/123”
- The interception does not work, the [author] params is “(.)john”
- Reload the page, the [author] params is “john”
Now go back to the root and click on the “Static” link. This route doesn’t use dynamic routes and the interception works as expected.
Describe the Bug
When using dynamic routes in the modal, the interception of the current route does not work. That is, when I’m on the “/photos” page, I want a modal-ize “/photos/[author]/[id]”
Expected Behavior
When on the “/photos” page, clicking on a child route should intercept the child modal.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 9
- Comments: 17 (7 by maintainers)
I also had the same problem:
Before I used folder [lang] to wrap: work
After I use folder [lang] to wrap: not work
Any fix this?
Looks like a duplicate of https://github.com/vercel/next.js/issues/48143.
Using the (…) as a workaround only helps if your root segment is not dynamic.
It turns out there’s already #52533 Please forward future discussion to that issue
I’ve been facing similar issue, it seems that using:
Fixes it. see here https://codesandbox.io/p/sandbox/quizzical-cloud-oj5kkw