Ensure hash on initial request is preserved in new router (#38913)

Fixes the hash being overwritten when you open a page.


## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>

packages/next/client/components/app-router.client.tsx

@@ -82,7 +82,11 @@ export default function AppRouter({
       },
       pushRef: { pendingPush: false, mpaNavigation: false },
       focusRef: { focus: false },
-      canonicalUrl: initialCanonicalUrl,
+      canonicalUrl:
+        initialCanonicalUrl +
+        // Hash is read as the initial value for canonicalUrl in the browser
+        // This is safe to do as canonicalUrl can't be rendered, it's only used to control the history updates the useEffect further down.
+        (typeof window !== 'undefined' ? window.location.hash : ''),
     })
 
   useEffect(() => {

test/e2e/app-dir/index.test.ts

@@ -1,6 +1,6 @@
 import { createNext, FileRef } from 'e2e-utils'
 import { NextInstance } from 'test/lib/next-modes/base'
-import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
+import { fetchViaHTTP, renderViaHTTP, waitFor } from 'next-test-utils'
 import path from 'path'
 import cheerio from 'cheerio'
 import webdriver from 'next-webdriver'
@@ -243,6 +243,20 @@ describe('app dir', () => {
     }
   )
 
+  it('should handle hash in initial url', async () => {
+    const browser = await webdriver(next.url, '/dashboard#abc')
+
+    try {
+      // Check if hash is preserved
+      expect(await browser.eval('window.location.hash')).toBe('#abc')
+      await waitFor(1000)
+      // Check again to be sure as it might be timed different
+      expect(await browser.eval('window.location.hash')).toBe('#abc')
+    } finally {
+      await browser.close()
+    }
+  })
+
   describe('<Link />', () => {
     // TODO-APP: fix development test
     it.skip('should hard push', async () => {