Closed vanlooverenkoen closed 2 days ago
Hi! The default behavior for parallel routes (which interception routes are built upon) is to remain in their "active" state if you navigate to a route that it doesn't match. If your intention is to hide the modal when navigating to another route, you need to explicitly create a corresponding route that renders null. Next.js doesn't assume that it's safe/desireable to unmount the parallel route that was being rendered.
You can read about this behavior here.
In your case, if you create a @modal/[...catchAll]/page.tsx
component that renders null
, you'll see the modal disappear when navigating to the /test
route.
Link to the code that reproduces this issue
https://github.com/vanlooverenkoen/nextgram
To Reproduce
It is not possible to go from a page (A) to a modal and to another page (B). If you try to do this this is what happens.
/test
and the new page is shown, but there is 1 big issue, the modal still stays open)/photos/1
/
Current vs. Expected behavior
The expected behaviour is that the modal closes if you go to another screen.
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 start (local)
Additional context
I have this on my own projects as well as nextgram.
This is a screen recording of the whole process
https://github.com/vercel/next.js/assets/21172855/ce735238-25a2-437c-a985-75ebe91b8fe3