next.js: Intercepting Routes is not working with a combination of URL query parameters, soft navigation, and hard navigation.

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 20.6.0: Mon Aug 30 06:12:20 PDT 2021; root:xnu-7195.141.6~3/RELEASE_ARM64_T8101
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: 8.6.3
    Relevant Packages:
      next: 13.4.12
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A
    Next.js Config:
      output: N/A

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

App Router, Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://nextgram.vercel.app/?par=21

To Reproduce

I will get https://nextgram.vercel.app for examples (because my project is private, I cannot public it. I confirmed it still on the latest version) CleanShot 2023-07-26 at 10 35 35

Reproduce

  1. Add query params into the URL looks like this: https://nextgram.vercel.app/?example=21
  2. Choose one of the items on the list.
  3. Reload the current page (trigger hard navigation).
  4. Click on the back previous button of the browser (or the way back to the previous page, ensure ?example=21 still exists on the URL).
  5. You need to choose one of the items like step 2, you can see the “intercepting route” will not work now.

Describe the Bug

As you can see, the “intercepting route” not working when the URL existed query params + hard navigation + soft navigation.

Expected Behavior

“Intercepting route” working every-time I use “soft navigation”

Which browser are you using? (if relevant)

Version 114.0.5735.133 (Official Build) (arm64)

How are you deploying your application? (if relevant)

Vercel

About this issue

  • Original URL
  • State: open
  • Created a year ago
  • Reactions: 14
  • Comments: 15 (1 by maintainers)

Most upvoted comments

You guys can see this video (https://nextgram.vercel.app used next version 13.4.7 but I confirmed it still exists on latest version on my private project).

https://drive.google.com/file/d/124vBC9FW4oFaEfPJoG0hTmv6HwqPxxFJ/view?usp=sharing

Any solution to this issue: Intercepting Routes is not working with a combination of URL query parameters, soft navigation, and hard navigation. Next js hits version 14 and this issue has not been resolved.