search

vercel / next.js

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

When using router.replace() from next/navigation for routing, the modal opened with the next.js slot does not close. #71795

Open 2dubbing opened 6 days ago

2dubbing commented 6 days ago

Link to the code that reproduces this issue

https://github.com/2dubbing/nextgram

To Reproduce

  1. npm install
  2. npm run dev
  3. Open web browser http://localhost:3000
  4. Click the square UI with the number on it on the screen.
  5. Click the X button in the modal window.

Current vs. Expected behavior

Current: If you route with router.replace() while the modal window is open, the modal window will not close.

Expected behavior: Routing with router.replace() should close any open modal windows.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.0.0: Mon Aug 12 20:51:54 PDT 2024; root:xnu-11215.1.10~2/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 20.18.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 9.6.0
Relevant Packages:
  next: 15.0.0-canary.61
  react: 19.0.0-rc.0
  react-dom: 19.0.0-rc.0
  typescript: 5.5.3
Next.js Config:
  output: N/A

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

create-next-app

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

next dev (local)

Additional context

You might want to use router.replace for the following reasons Because we think it's better for usability to use router.replace rather than router.back if the data change is successful on the Change Form Data page.

thank you.

2dubbing commented 3 days ago

I've also tried using useSelectedLayoutSegment() in @modal/layout.tsx to see if conditional rendering works, but I'm still experiencing the same issue.