[NEXT-1160] Clicking Links in intercepted routes does not unmount the interceptor route

[mkarajohn]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #41~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Fri Mar 31 16:00:14 UTC 2
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.2-canary.5
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://codesandbox.io/p/github/mkarajohn/nextgram/draft/restless-leftpad?file=/components/frame/index.js

To Reproduce

1. Open the codesandbox in a new separate tab in order to be able to see the actual browser URL
2. Click on a photo in order to intercept the route and open the modal with the photo details.
3. Instead of clicking on the overlay click the "go back" link instead, located just below the photo

Describe the Bug

When you click the Link and the URL changes to / the interceptor route remains mounted and does not go away.

Expected Behavior

I would expect that since the route was changed (via Link no less) the interceptor page should disappear once the route that it was intercepting was changed.

Screencast.from.11-05-2023.04.23.04.webm

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1160

[feedthejim]

hey @mkarajohn you can dismiss a modal like this via adding a catch-all route, see https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#dismissing-a-modal

it doesn't work in your example because the router maintains routes already mounted until they their slot navigates

[mkarajohn]

@feedthejim
Hi again, sorry, I am new to Next and maybe I am still misunderstanding, but the docs read:

you can dismiss the modal by calling router.back() or by using a Link component.

In the case described in the issue, I am using a Link component, the route changes, like it would if I had used router.back() but the change does not get reflected to the UI, unlike when using router.back(). Sorry for insisting, but the docs say "or by using a Link component" and this is clearly not the case here.

I added a catchAll route as per your suggestion, and I tried moving it around from app/ to app/@modal/ to app/@modal/(..)photos/ and see in which dir it will work as described and it did not work.

Either I am doing something very wrong, which is very likely and in which case I would appreciate if you could make the adjustment in the repro codesandbox so that I can see or explain it in a little more detail, or something is not working as described, or the docs are saying something that is not true.

Thank you

[mkarajohn]

I tried changing the Link with

    <button
      className="action"
      onClick={() => {
        router.push(`/`);
      }}
    >
      Close
    </button>

and this still does not work, while

    <button
      className="action"
      onClick={() => {
        router.back();
      }}
    >
      Close
    </button>

this works.

So, router.back() (moving back in the history stack) and router.push() (adding to the history stack) behave differently somehow for this case? They both change the url to / in the end. I am confused at how it's determined that in one case the route changed while in the other it's treated as if it did not.

[resthedev]

+1 I'm having this issue as well. Like OP, I've also tried using the the catch all route and putting default.tsx in various places but nothing works.

The only way for me to close the modal seems to be to use router.back() since using a Link to the previous page changes the URL but leaves the modal opened.

[oliverjam]

Yeah as far as I can tell catch all routes just don't work for clearing an intercepted route. See #48719 and #49531

[vetledv]

I am also having this issue. I found a workaround by grouping the intercepted route and placing the target route outside of this group.

[mkarajohn]

@vetledv Can you show how? (using something simple, like the reproduction repo in the OP)

@feedthejim considering other people are reporting this too, maybe this should be reopened?

[vetledv]

@mkarajohn I see now that it only works in my specific use page (I was linking to an equivalent of /hello in this example). Here is a repo that I believe should cover all the behaviours. This does very much not seem like intended behaviours.
https://github.com/vetledv/repro-intercept

[mkarajohn]

@vetledv thanks for this, very informative, I played with it a little. Like you said, the grouping is the only thing that seems to be "fixing" this behaviour, nice find. The [...catchAll] route doesn't seem to do anything, can be deleted without effect.

And, again, like you said, it does not seem like "intended behaviour" considering you cannot return to / using a Link, since it's in the same group.

[vetledv]

I suppose the only reason it works is because it is no longer rendering the layout containing the modal. And yeah, the catchAll or any of the suggestions does not seem to work. Would like to see this reopened.