Linking to the base route from an intercepted route does not clear the intercepted slot

[maxch-aa]

Link to the code that reproduces this issue

https://codesandbox.io/p/github/maxch-aa/next-intercepted-route/main

To Reproduce

1. Navigate to /
2. Click on a card
3. In the modal, click on GO TO ALL FRAMES.

Current vs. Expected behavior

Currently the url changes to /, but the modal remains.
I expect the modal to disappear.

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: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.0.2-canary.18
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

Issue demo

_NEXT-2039

[dclark27]

Screen.Recording.2023-12-07.at.12.47.47.PM.mov

Same issue here. Linking from a parallel route back to the main page we rendered it from does not work if data has been mutated and a revalidation has occurred.

[Inlustra]

I can confirm what I believe is the same issue.

Directory Structure:

app/
├─ operations/
│  ├─ layout.tsx
│  ├─ page.tsx
│  ├─ @rightSidebars/
│  │  ├─ my-sidebar/
│  │  │  ├─ [id]/
│  │  │  │  ├─ page.tsx
│  │  ├─ default.tsx

Navigating:
/operations -> /operations/my-sidebar/1234 -> /operations

Causes the sidebar to still be shown. (And the useSelectedLayoutSegments()) still display the full segment list as though the navigation never happened.

Whether I use a <Link href="/operations" /> or whether I use router.push("/operations")

As a bit of a side note:
router.back() does seem to work, unforunately for us however, the whole point of the route is to enable navigating like so:

/operations -> /operations/my-sidebar/1234 -> /operations/my-sidebar/4321 -> /operations

So router.back() doesn't work for our use-case

[ztanner]

Hi @maxch-aa. If you modify your @modal slot to have a catch-all route as follows:

app
  @modal
    (.)photos
    [...catchAll]
      page.tsx 

And have the catchAll page render null, you'll get the behavior you're expecting in your modal nextgram reproduction. You can read a bit more about this pattern in the parallel routes documentation here.

Here's a quick video of me making this change and testing the app:

CleanShot.2024-01-10.at.14.02.21.mp4

The reason for this behavior is that parallel routes (which is what route interception is built on top of), when navigating to a new route, will preserve whatever was in the slot previously when it cannot find a match on the new route. The catch-all route fixes this because when navigating back to /, it will match the catch-all again and render nothing.

Let me know if this doesn't make sense or you aren't able to get it to work. Will be happy to dig in further. I'll be closing this for now since this appears to be by design.

[Inlustra]

@ztanner Thanks for your response, I was super hopeful, unfortunately this solution isn't working for me

I've tested with the layout.tsx in /operations being both a client side and server side component. No dice.

/operations -> /operations/trips/1234 -> /operations/trips/4321 -> /operations
This still causes the right sidebar to be shown

Layout is super simple

const OperationsLayout = ({
  children,
  rightSidebars,
}: {
  children: React.ReactNode;
  rightSidebars: React.ReactNode;
}) => {
  return (
    <div>
        {children}
        {rightSidebars}
    </div>
  );
};

export default OperationsLayout;

If I remove the app/operations/@rightSidebars/default.tsx file. I get a 404 when navigating to /operations

[Inlustra]

I think I'm seeing the same behavior described in
#58796

[maxch-aa]

@ztanner I've added the catch-all route you recommended here:
https://codesandbox.io/p/github/maxch-aa/next-intercepted-route/main

It makes no difference. I thought the default.js file plays the role of the catch-all route when non of the parallel routes match.

[Inlustra]

I can also confirm that the latest canary build v14.0.5-canary.52 also has the same issue

[ztanner]

@Inlustra Could you open an issue with a reproduction? It's difficult to go off of screenshots alone, thank you!
@maxch-aa could you try the latest canary in your sandbox? It's working for me here:

https://codesandbox.io/p/github/maxch-aa/next-intercepted-route/csb-88vlwf/draft/objective-hill

[maxch-aa]

@ztanner Just updated to the latest canary v14.0.5-canary.52 and I see no change:

It wouldn't let me view your link, because of permissions perhaps. What changes did you make or what steps do you take?

[ztanner]

@maxch-aa I just bumped next and restarted the dev server.

I revisited your sandbox and it worked for me

CleanShot.2024-01-11.at.08.48.10.mp4

[maxch-aa]

@ztanner I got it finally working by running rm -rf .next in the terminal first.

@Inlustra The catch-all trick is mentioned here: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#dismissing-a-modal . The docs also say:

On navigation, Next.js will render the slot's previously active state, even if it doesn't match the current URL.

[Inlustra]

Yeah I think it's to do with a nested page.

@ztanner I've modified the codesandbox with the issue occurring here

Created #60541 to follow up

[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.