Assume you are building a site fully managed from a headless CMS, and move the root page.tsx file to a catch-all route e.g. app/[[...params]]/page.tsx
Create a page.tsx file in app/photos folder export default function Page() { return <div>All Photos here</div>; } (we could also add params logic to the catch all route, but this is simpler for testing).
Add a link to the modal linking to all photos - <Link href="/photos'>All photos</Link>
Test link.. Result: Modal remains open when navigating to the photos route.
Read and follow documentation telling us to create a [...catchall] route in the @modal directory, with a page that returns null
See error: Failed to reload dynamic routes: Error: You cannot use both an required and optional catch-all route at the same level ("[...catchall]" and "[[...params]]" ).
Current vs. Expected behavior
I believe this is to be expected - however an alternative approach or solution to closing the modal on navigation is needed in that case.
Provide environment information
Node.js v22.5.1
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.5.0: Wed May 1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
Available memory (MB): 65536
Available CPU cores: 10
Binaries:
Node: 22.5.1
npm: 10.8.2
Yarn: 1.22.22
pnpm: N/A
Relevant Packages:
next: 14.2.5 // Latest available version is detected (14.2.5).
eslint-config-next: N/A
react: 18.3.1
react-dom: 18.3.1
typescript: N/A
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Parallel & Intercepting Routes
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), next start (local)
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
Link to the code that reproduces this issue
https://github.com/imCorfitz/next-modal-issue-example
To Reproduce
page.tsx
file to a catch-all route e.g.app/[[...params]]/page.tsx
page.tsx
file inapp/photos
folderexport default function Page() { return <div>All Photos here</div>; }
(we could also add params logic to the catch all route, but this is simpler for testing).all photos
-<Link href="/photos'>All photos</Link>
[...catchall]
route in the@modal
directory, with a page that returnsnull
Failed to reload dynamic routes: Error: You cannot use both an required and optional catch-all route at the same level ("[...catchall]" and "[[...params]]" )
.Current vs. Expected behavior
I believe this is to be expected - however an alternative approach or solution to closing the modal on navigation is needed in that case.
Provide environment information
Which area(s) are affected? (Select all that apply)
Parallel & Intercepting Routes
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), next start (local)
Additional context
No response