Intercepting Routes + Dynamic Routes cause incorrect page routing

[Tim0401]

Link to the code that reproduces this issue

https://github.com/Tim0401/nextjs-intercepting-dynamic-routes

To Reproduce

1. Start the application in development (npm run dev)
2. Access http://localhost:3000/parent
3. Click /parent/new
4. params.id: new is displayed

Current vs. Expected behavior

I expected to display new, but got params.id: new. In other words, when I accessed /parent/new, I expected it to be routed to app/[parentId]/(.)new/page.tsx, but it was routed to app/[parentId]/(.)[id]/page.tsx.

Verify canary release

• [X] 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 23.1.0: Mon Oct  9 21:28:45 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6020
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.0.5-canary.9
  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, Routing (next/router, next/navigation, next/link)

Additional context

This problem seems to reproduce only under nested Dynamic Routes.

[victorcesae]

I'm facing the same issue with parallel routes in my application, specifically involving the routes '/orders/[id]' and '/orders/new'. I have a folder structure like '/@modal/(.)[id]/page.tsx'. When I navigate to '/orders/new' using router.push('/orders/new'), unexpectedly, the content of '/orders/(.)[id]' is rendered.

I've identified a workaround by reloading the page, but this approach comes with the drawback of losing client-side cache. Seeking a more efficient solution to ensure the correct rendering of '/orders/new' without resorting to a full page reload.