fix popstate detection for safari when basepath is present (vercel#32687)

* fix popstate detection for safari when basepath is present

* Add test case

Co-authored-by: JJ Kasper <jj@jjsweb.site>

Author: dan-weaver

.github/workflows/build_test_deploy.yml

@@ -432,6 +432,7 @@ jobs:
       BROWSERSTACK: true
       BROWSER_NAME: 'safari'
       NEXT_TELEMETRY_DISABLED: 1
+      NEXT_TEST_MODE: 'start'
       SKIP_LOCAL_SELENIUM_SERVER: true
       BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
       BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
@@ -464,7 +465,7 @@ jobs:
       - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || npm i -g browserstack-local@1.4.0'
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
-      - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js -c 1 test/integration/production/test/index.test.js'
+      - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js -c 1 test/integration/production/test/index.test.js test/e2e/basepath.test.ts'
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testSafariOld:

packages/next/shared/lib/router/router.ts

@@ -824,7 +824,11 @@ export default class Router implements BaseRouter {
 
     // Make sure we don't re-render on initial load,
     // can be caused by navigating back from an external site
-    if (this.isSsr && as === this.asPath && pathname === this.pathname) {
+    if (
+      this.isSsr &&
+      as === addBasePath(this.asPath) &&
+      pathname === addBasePath(this.pathname)
+    ) {
       return
     }
 

test/e2e/basepath.test.ts

@@ -97,6 +97,29 @@ describe('basePath', () => {
   afterAll(() => next.destroy())
 
   const runTests = (dev = false) => {
+    it('should navigate to external site and back', async () => {
+      const browser = await webdriver(next.url, `${basePath}/external-and-back`)
+      const initialText = await browser.elementByCss('p').text()
+      expect(initialText).toBe('server')
+
+      await browser
+        .elementByCss('a')
+        .click()
+        .waitForElementByCss('input')
+        .back()
+        .waitForElementByCss('p')
+
+      await waitFor(1000)
+      const newText = await browser.elementByCss('p').text()
+      expect(newText).toBe('server')
+    })
+
+    if (process.env.BROWSER_NAME === 'safari') {
+      // currently only testing the above test in safari
+      // we can investigate testing more cases below if desired
+      return
+    }
+
     it('should navigate back correctly to a dynamic route', async () => {
       const browser = await webdriver(next.url, `${basePath}`)
 

test/e2e/basepath/pages/external-and-back.js

@@ -0,0 +1,12 @@
+const Page = ({ from }) => (
+  <div>
+    <p>{from}</p>
+    <a href="https://google.com">External link</a>
+  </div>
+)
+
+Page.getInitialProps = () => {
+  return { from: typeof window === 'undefined' ? 'server' : 'client' }
+}
+
+export default Page