App Router: fix relative query/hash handling in next/link

vercel · May 9, 2023 · 195757f · 195757f
1 parent 5451564
commit 195757f
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 2 deletions.
diff --git a/packages/next/src/client/components/app-router.tsx b/packages/next/src/client/components/app-router.tsx
@@ -211,7 +211,7 @@ function Router({
       navigateType: 'push' | 'replace',
       forceOptimisticNavigation: boolean
     ) => {
-      const url = new URL(addBasePath(href), location.origin)
+      const url = new URL(addBasePath(href), location.href)
 
       return dispatch({
         type: ACTION_NAVIGATE,
@@ -261,7 +261,7 @@ function Router({
         if (isBot(window.navigator.userAgent)) {
           return
         }
-        const url = new URL(addBasePath(href), location.origin)
+        const url = new URL(addBasePath(href), location.href)
         // External urls can't be prefetched in the same way.
         if (isExternalURL(url)) {
           return

diff --git a/test/e2e/app-dir/navigation/app/hash/page.js b/test/e2e/app-dir/navigation/app/hash/page.js
@@ -20,6 +20,9 @@ export default function HashPage() {
       <Link href="/hash#hash-300" id="link-to-300">
         To 300
       </Link>
+      <Link href="#hash-500" id="link-to-500">
+        To 500 (hash only)
+      </Link>
       <Link href="/hash#top" id="link-to-top">
         To Top
       </Link>

diff --git a/test/e2e/app-dir/navigation/app/nested-relative-query-and-hash/page.js b/test/e2e/app-dir/navigation/app/nested-relative-query-and-hash/page.js
@@ -0,0 +1,25 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <>
+      <h1 id="h1">
+        <Link href="#h1" id="link-to-h1-hash-only">
+          To #h1, hash only
+        </Link>
+      </h1>
+
+      <p>
+        <Link href="?foo=1&bar=2" id="link-to-dummy-query">
+          Query only
+        </Link>
+      </p>
+
+      <h2 id="h2">
+        <Link href="?here=ok#h2" id="link-to-h2-with-hash-and-query">
+          To #h2, with both relative hash and query
+        </Link>
+      </h2>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/navigation/navigation.test.ts b/test/e2e/app-dir/navigation/navigation.test.ts
@@ -53,11 +53,52 @@ createNextDescribe(
         await checkLink(50, 730)
         await checkLink(160, 2270)
         await checkLink(300, 4230)
+        await checkLink(500, 7030) // this one is hash only (`href="#hash-500"`)
         await checkLink('top', 0)
         await checkLink('non-existent', 0)
       })
     })
 
+    describe('relative hashes and queries', () => {
+      const pathname = '/nested-relative-query-and-hash'
+
+      it('should work with a hash-only url', async () => {
+        const browser = await next.browser(pathname)
+        await browser.elementByCss('#link-to-h1-hash-only').click()
+
+        await check(() => browser.url(), next.url + pathname + '#h1')
+      })
+
+      it('should work with a query-only url', async () => {
+        const browser = await next.browser(pathname)
+        await browser.elementByCss('#link-to-dummy-query').click()
+
+        await check(() => browser.url(), next.url + pathname + '?foo=1&bar=2')
+      })
+
+      it('should work with both relative hashes and queries', async () => {
+        const browser = await next.browser(pathname)
+        await browser.elementByCss('#link-to-h2-with-hash-and-query').click()
+
+        await check(() => browser.url(), next.url + pathname + '?here=ok#h2')
+
+        // Only update hash
+        await browser.elementByCss('#link-to-h1-hash-only').click()
+        await check(() => browser.url(), next.url + pathname + '?here=ok#h1')
+
+        // Replace all with new query
+        await browser.elementByCss('#link-to-dummy-query').click()
+        await check(() => browser.url(), next.url + pathname + '?foo=1&bar=2')
+
+        // Add hash to existing query
+        await browser.elementByCss('#link-to-h1-hash-only').click()
+        await check(
+          () => browser.url(),
+          next.url + pathname + '?foo=1&bar=2#h1'
+        )
+      })
+    })
+
     describe('not-found', () => {
       it('should trigger not-found in a server component', async () => {
         const browser = await next.browser('/not-found/servercomponent')