fix(next): keep hash when navigating from app to pages

Fixes vercel#56212

packages/next/src/client/components/router-reducer/reducers/navigate-reducer.ts

@@ -263,7 +263,13 @@ export function navigateReducer(
 
   // Handle case when navigating to page in `pages` from `app`
   if (typeof flightData === 'string') {
-    return handleExternalUrl(state, mutable, flightData, pendingPush)
+    return handleExternalUrl(
+      state,
+      mutable,
+      // flightData omits the hash, use the href including the hash as the external url when the href has a different path
+      flightData ? href : flightData,
+      pendingPush
+    )
   }
 
   let currentTree = state.tree

test/e2e/app-dir/navigation/app/hash-link-to-pages-router/global.css

@@ -0,0 +1,7 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-size: 14px;
+  line-height: 1;
+}

test/e2e/app-dir/navigation/app/hash-link-to-pages-router/page.js

@@ -0,0 +1,13 @@
+import Link from 'next/link'
+import './global.css'
+
+export default function HashPage() {
+  return (
+    <div style={{ fontFamily: 'sans-serif', fontSize: '16px' }}>
+      <p>Hash To Pages Router Page</p>
+      <Link href="/some#non-existent" id="link-to-pages-router">
+        To pages router
+      </Link>
+    </div>
+  )
+}

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

@@ -498,6 +498,15 @@ createNextDescribe(
         expect(await browser.url()).toBe(next.url + '/some')
       })
 
+      it('should not omit the hash while navigating from app to pages', async () => {
+        const browser = await next.browser('/hash-link-to-pages-router')
+        await browser
+          .elementByCss('#link-to-pages-router')
+          .click()
+          .waitForElementByCss('#link-to-app')
+        await check(() => browser.url(), next.url + '/some#non-existent')
+      })
+
       if (!isNextDev) {
         // this test is pretty hard to test in playwright, so most of the heavy lifting is in the page component itself
         // it triggers a hover on a link to initiate a prefetch request every second, and so we check that