Fix RSC link navigation (#32303)

Co-authored-by: JJ Kasper <jj@jjsweb.site> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
vercel · Dec 9, 2021 · b044f42 · b044f42
1 parent 7e055dd
commit b044f42
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 deletions.
diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
@@ -673,11 +673,9 @@ if (process.env.__NEXT_RSC) {
               return Promise.resolve({ body: t.readable })
             })()
           : (() => {
-              const search = location.search
+              const { search, pathname } = location
               const flightReqUrl =
-                location.pathname +
-                search +
-                (search ? '&__flight__' : '?__flight__')
+                pathname + search + (search ? '&' : '?') + '__flight__'
               return fetch(flightReqUrl)
             })()
       )

diff --git a/packages/next/client/page-loader.ts b/packages/next/client/page-loader.ts
@@ -147,7 +147,9 @@ export default class PageLoader {
     const route = normalizeRoute(hrefPathname)
 
     const getHrefForSlug = (path: string) => {
-      if (rsc) return path + '?__flight__'
+      if (rsc) {
+        return path + search + (search ? `&` : '?') + '__flight__'
+      }
 
       const dataRoute = getAssetPathFromRoute(
         removePathTrailingSlash(addLocale(path, locale)),

diff --git a/test/integration/react-streaming-and-server-components/app/pages/next-api/link.server.js b/test/integration/react-streaming-and-server-components/app/pages/next-api/link.server.js
@@ -1,9 +1,17 @@
-import NextLink from 'next/link'
+import Link from 'next/link'
 
-export default function Link() {
+export default function LinkPage({ router }) {
+  const { query } = router
+  const id = parseInt(query.id || '0', 10)
   return (
-    <NextLink href={`/`}>
-      <a>go home</a>
-    </NextLink>
+    <>
+      <h3 id="query">query:{id}</h3>
+      <Link href={`/next-api/link?id=${id + 1}`}>
+        <a id="next_id">next id</a>
+      </Link>
+      <Link href={`/`}>
+        <a>go home</a>
+      </Link>
+    </>
   )
 }
diff --git a/test/integration/react-streaming-and-server-components/test/index.test.js b/test/integration/react-streaming-and-server-components/test/index.test.js
@@ -14,6 +14,7 @@ import {
   nextBuild as _nextBuild,
   nextStart as _nextStart,
   renderViaHTTP,
+  check,
 } from 'next-test-utils'
 
 import css from './css'
@@ -285,12 +286,19 @@ async function runBasicTests(context, env) {
     expect(pathNotFoundHTML).toContain('custom-404-page')
   })
 
-  it('should suspense next/link on server side', async () => {
+  it('should support next/link', async () => {
     const linkHTML = await renderViaHTTP(context.appPort, '/next-api/link')
     const $ = cheerio.load(linkHTML)
     const linkText = $('div[hidden] > a[href="/"]').text()
 
     expect(linkText).toContain('go home')
+
+    const browser = await webdriver(context.appPort, '/next-api/link')
+    await browser.eval('window.beforeNav = 1')
+    await browser.elementByCss('#next_id').click()
+    await browser.elementByCss('#next_id').click()
+    await check(() => browser.waitForElementByCss('#query').text(), /query:2/)
+    expect(await browser.eval('window.beforeNav')).toBe(1)
   })
 
   it('should suspense next/image on server side', async () => {