navigation from pages directory to app does not refresh page which results in a blank page

[bestLessons]

Link to the code that reproduces this issue

https://github.com/bestLessons/next-js-routing-issue

To Reproduce

1. Open /me page. There should be 2 buttons. Each of them uses router.push to navigate to different pages which are located in the app directory

2. Click on Go to /john/posts/lorem-slug button - page is blank
3. Press reload the page button in the browser

4. Page loads correctly and there should be some content

Attaching also video reproduction of the issue
https://github.com/vercel/next.js/assets/16179389/ddcd4612-6eb4-47fc-a7d7-ce787ba3e876

Current vs. Expected behavior

When navigating from pages directory to app I expect full page reload which will load page correctly instead of seeing the blank page as it is now

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

Navigation

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

next dev (local), next build (local), next start (local), Other (Deployed)

Additional context

Seems like issue happens because of catchAll route which is in the pages directory

there are 2 routes which are similar

app      [username]/posts/[slug]/page.tsx
pages  [username]/[...directLinkId].tsx