Shallow routing does not work on subdomains/multi-tenant platforms

[heymartinadams]

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 22.1.0: Sun Oct  9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.16.0
      npm: 8.11.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.1.7-canary.11
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

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

Middleware / Edge (API routes, runtime), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://github.com/heymartinadams/next-router-subdomains

To Reproduce

1. yarn next
2. Navigate to http://a.localhost:3000
3. Press the Shallow routing button and observe how page reloads after shallow routing.

CleanShot.2023-02-13.at.22.05.26.mp4

Describe the Bug

Shallow routing should not initiate a page reload. On a small demo, like the reproduction demo, it’s barely perceptible, but on a larger site, it’s very much noticeable (see video below).

CleanShot.2023-02-13.at.22.10.23.mp4

Expected Behavior

The page shouldn’t reload on shallow routing.

Note: this issue was originally posted in vercel/platforms#202, but posting here because it appears to be a core issue related to next/router.

Which browser are you using? (if relevant)

Chrome 109.0.5414.119

How are you deploying your application? (if relevant)

localhost

[SuttonJack]

Hey, @heymartinadams - I posted a PR in your reproduction repo.

Shallow routing within subdomains requires the second argument in router.push calls

[heymartinadams]

@SuttonJack man... you just saved me so much time with your comment... that was indeed it. Hope it helps someone else, too, if they see this solution. Thank you! 💯🙏

[heymartinadams]

Leaving solution here, in case I ever delete my reproduction.

  const router = useRouter()
  const { query: { site }, pathname } = router

  return (
      <button onClick={() => {
        router.push(
          { pathname, query: { site, hello: 'world' } },
          { pathname: '/', query: { hello: 'world' } },  // ← need this too for shallow routing on subdomains
          { shallow: true }
        )
      }}>
        Shallow routing
      </button>
  )

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.