Intercepting Routes do not close on navigation with `router.push` or `<Link>` in Next.js about next.js

[ztanner]

Hi @hqw567 and @steve-marmalade -- since catch-all routes ([...route]) match everything except the index route (ie, /foo/bar, /foo/bar/baz, but not /foo), and you're linking back to the root page, you'd ideally use an optional catch-all route here ([[...route]]). This would include the index route. However, parallel routes don't yet support optional catch-all segments (but it's being tracked here).

In the meantime, you can work around this by having a @modal/page.tsx component that returns null. I tested that with your provided reproduction and it appears to have worked as you expect.

[iamcrisb]

they managed to break the router again. insane

[hqw567]

Hi - as mentioned by @xvvvyz, the catch-all route is the correct way to handle this, and the docs link provided above explains why it behaves this way.

Going to close this out but don't hesitate to ask any follow-up questions if you have any :)

Hi @ztanner,
I tried using the catch-all route you mentioned, but it didn't work at all.

hqw567/nextgram@f0eeac3

[steve-marmalade]

@ztanner , thanks for the quick response and the additional context! unfortunately, this didn't immediately help me, since in my application I am routing to a non-index route and still seeing the modal stay open (which it sounds like should be covered by the regular [...catchAll] route).

I will try to modify the nextgram repo to see if I can easily reproduce.

[xvvvyz]

Looks like you don't have a catch-all route in your @modal slot. Read:

https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#closing-the-modal

[lhnrd]

@ztanner , thanks for the quick response and the additional context! unfortunately, this didn't immediately help me, since in my application I am routing to a non-index route and still seeing the modal stay open (which it sounds like should be covered by the regular [...catchAll] route).

I will try to modify the nextgram repo to see if I can easily reproduce.

I'm having a similar problem. The slot route is not being unmounted after I navigate to a different non-index route. I've tried, default pages, null pages and catch all routes. No luck here.

[ztanner]

Hi - as mentioned by @xvvvyz, the catch-all route is the correct way to handle this, and the docs link provided above explains why it behaves this way.

Going to close this out but don't hesitate to ask any follow-up questions if you have any :)

[steve-marmalade]

I am having the same issue - a modal (built using parallel + intercepted route) in my application is not closing on client-side navigation, even after adding the [...catchAll] route. Thanks for creating the repro @hqw567 .

One observation is that I have a seen a difference between development and production builds. When I downgrade @hqw567 's repro to 14.1.0 and do next build && next start, the navigation works as expected. But development mode doesn't work in 14.1.0, and in the latest canary the navigation issue is present in both development and production builds.

[steve-marmalade]

@ztanner - I believe I have been able to create a minimal reproduction for the issue that I'm seeing where the parallel + intercepted route does not close as expected.

https://modal-catchall-repro.vercel.app/for-you

• If you click on "Open Modal", a very stripped down "modal" will appear
• If you click on "Profile Link", you will navigate to another page, but the "modal" will still be showing
• To demonstrate it's not a truly boneheaded configuration error on my part, I also have a link to another page, which does trigger the catch-all route and close the modal.

I am not sure why the modal closes is in the second case but not the first. Any help would be greatly appreciated 🙏

https://github.com/marmalade-labs/modal-catchall-repro

modal.mp4

[steve-marmalade]

Hi @ztanner - should I create a new issue with the reproduction I shared above?

[ztanner]

Hi @steve-marmalade -- a new issue would be helpful, thank you! It appears to function correctly with Turbopack (--turbo) so likely a bundling edge case that we need to fix for your particular setup.

[steve-marmalade]

@ztanner - I just created the issue here: #62948

Regarding Turbopack, am I correct that this could be a workaround in development but that it won't help the issue when deployed to Vercel (since production builds are not yet supported with turbopack)?

[ztanner]

That's correct, yes -- production builds are not yet supported. Thank you for creating the issue!

[steve-marmalade]

@lhrinaldi - would you mind giving #62948 a 👍 if you think it's similar to the issue you are facing?

[MrOxMasTer]

ожидали.

Hi @hqw567 and @steve-marmalade -- since catch-all routes ([...route]) match everything except the index route (ie, /foo/bar, /foo/bar/baz, but not /foo), and you're linking back to the root page, you'd ideally use an optional catch-all route here ([[...route]]). This would include the index route. However, parallel routes don't yet support optional catch-all segments (but it's being tracked here).

In the meantime, you can work around this by having a @modal/page.tsx component that returns null. I tested that with your provided reproduction and it appears to have worked as you expect.

I understand correctly that using Link:

There is no way we can close a window like "menu" in the header and it will always send us to a specific page. Is that the only way I understood router.back() to help?

[sejoalfaro]

Recently I had the same problem and it was fixed using the[...catchAll]file directory. But I wonder if the default file is not enough to solve this? I tried with default.tsx but it dosent work. In my personal opinion, it doesn't look good to have a catchAll directory just for a modal to work on.

[github-actions]

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.