search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
122.51k stars 26.22k forks source link

navigating back from multiple intercepted route breaks routing #66853

Open roksui opened 1 week ago

roksui commented 1 week ago

Link to the code that reproduces this issue

https://github.com/roksui/my-nextagram

To Reproduce

  1. Clone the repository and checkout to the master branch.
  2. Start the application in dev mode using npm run dev.
  3. Click on View my notifications link.
  4. Click on View photo 1.
  5. Do a browser refresh (pressing F5).
  6. Press the browser back button (once or twice).
  7. The url changes to the previous route but the page does not.

Current vs. Expected behavior

When I press the back button in step 6 above, I expected the browser to navigate back to the intercepted route for /notifications. However, only the URL changes and the page stays the same, showing the intercepted route of /photos.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 32545
  Available CPU cores: 16
Binaries:
  Node: 18.17.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.0-canary.29 // Latest available version is detected (15.0.0-canary.29).
  eslint-config-next: 15.0.0-canary.29
  react: 19.0.0-rc-f994737d14-20240522
  react-dom: 19.0.0-rc-f994737d14-20240522
  typescript: 5.3.3
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 start (local)

Additional context

Basically my use case is to open two modals A and B, where modal B is opened from modal A. I have it structured as:

app
  @modal
    (.)notifications
    (.)photos
  notifications
    page.tsx
  photos
    page.tsx

I could not find any documentation on implementing multiple intercepted routes, so not sure if this structure is the way to go.

With this structure, the intercepting works with no problems with the two modals. Also, refreshing on the first intercepting route and navigating back works too. However, refreshing on the second intercepting route and navigating back causes an issue.

hypervisor commented 1 week ago

Can confirm this happens to my app as well, in both dev and prod.

khuezy commented 1 week ago

Related, when using <Link /> to link to base of the modal, the modal still persists when it should be destroyed instead. eg /photos/A, then use Link to go to /photos, the route changes but the modal is still there.

khuezy commented 6 days ago

Try duplicating default.tsx and rename duplicated file to page.tsx for each @modal folder. That should clear the modal when you go back to the root of each intercepted folder.