fix(gatsby): Hashes and anchors in redirects also work in production (#32850)

Author: LekoArts

e2e-tests/production-runtime/cypress/integration/redirects.js

@@ -9,6 +9,7 @@ describe(`Redirects`, () => {
 
     cy.get(`h1`).invoke(`text`).should(`contain`, `Hi from the long page`)
   })
+
   it(`are case sensitive when ignoreCase is set to false`, () => {
     cy.visit(`/PAGINA-larga`, { failOnStatusCode: false }).waitForRouteChange()
 
@@ -57,4 +58,67 @@ describe(`Redirects`, () => {
       })
     })
   })
+
+  it(`should support hash parameter with Link component`, () => {
+    cy.visit(`/`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
+
+    cy.getTestElement(`redirect-two-anchor`).click().waitForRouteChange()
+    cy.location(`pathname`).should(`equal`, `/redirect-search-hash`)
+    cy.location(`hash`).should(`equal`, `#anchor`)
+    cy.location(`search`).should(`equal`, ``)
+  })
+
+  it(`should support hash parameter on direct visit`, () => {
+    cy.visit(`/redirect-two#anchor`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
+
+    cy.location(`pathname`).should(`equal`, `/redirect-search-hash/`)
+    cy.location(`hash`).should(`equal`, `#anchor`)
+    cy.location(`search`).should(`equal`, ``)
+  })
+
+  it(`should support search parameter with Link component`, () => {
+    cy.visit(`/`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
+
+    cy.getTestElement(`redirect-two-search`).click().waitForRouteChange()
+    cy.location(`pathname`).should(`equal`, `/redirect-search-hash`)
+    cy.location(`hash`).should(`equal`, ``)
+    cy.location(`search`).should(`equal`, `?query_param=hello`)
+  })
+
+  it(`should support search parameter on direct visit`, () => {
+    cy.visit(`/redirect-two?query_param=hello`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
+
+    cy.location(`pathname`).should(`equal`, `/redirect-search-hash/`)
+    cy.location(`hash`).should(`equal`, ``)
+    cy.location(`search`).should(`equal`, `?query_param=hello`)
+  })
+
+  it(`should support search & hash parameter with Link component`, () => {
+    cy.visit(`/`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
+
+    cy.getTestElement(`redirect-two-search-anchor`).click().waitForRouteChange()
+    cy.location(`pathname`).should(`equal`, `/redirect-search-hash`)
+    cy.location(`hash`).should(`equal`, `#anchor`)
+    cy.location(`search`).should(`equal`, `?query_param=hello`)
+  })
+
+  it(`should support search & hash parameter on direct visit`, () => {
+    cy.visit(`/redirect-two?query_param=hello#anchor`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
+
+    cy.location(`pathname`).should(`equal`, `/redirect-search-hash/`)
+    cy.location(`hash`).should(`equal`, `#anchor`)
+    cy.location(`search`).should(`equal`, `?query_param=hello`)
+  })
 })

e2e-tests/production-runtime/gatsby-node.js

@@ -145,6 +145,13 @@ exports.createPages = ({ actions: { createPage, createRedirect } }) => {
     redirectInBrowser: true,
     ignoreCase: true,
   })
+
+  createRedirect({
+    fromPath: `/redirect-two`,
+    toPath: `/redirect-search-hash`,
+    isPermanent: true,
+    redirectInBrowser: true,
+  })
 }
 
 exports.onCreatePage = ({ page, actions }) => {

e2e-tests/production-runtime/package.json

@@ -33,7 +33,7 @@
     "build": "cross-env CYPRESS_SUPPORT=y gatsby build",
     "build:offline": "cross-env TEST_PLUGIN_OFFLINE=y CYPRESS_SUPPORT=y gatsby build",
     "develop": "gatsby develop",
-    "format": "prettier --write '**/*.js'",
+    "format": "prettier --write '**/*.js' --ignore-path .gitignore",
     "serve": "gatsby serve",
     "start": "npm run develop",
     "test": "npm run build && npm run start-server-and-test && npm run test-env-vars",

e2e-tests/production-runtime/src/pages/index.js

@@ -92,6 +92,27 @@ const IndexPage = ({ pageContext }) => (
           Go to client route splat (splat: blah/blah/blah)
         </Link>
       </li>
+      <li>
+        <Link to="/redirect-two#anchor" data-testid="redirect-two-anchor">
+          Go to redirect with hash
+        </Link>
+      </li>
+      <li>
+        <Link
+          to="/redirect-two?query_param=hello"
+          data-testid="redirect-two-search"
+        >
+          Go to redirect with query param
+        </Link>
+      </li>
+      <li>
+        <Link
+          to="/redirect-two?query_param=hello#anchor"
+          data-testid="redirect-two-search-anchor"
+        >
+          Go to redirect with query param and hash
+        </Link>
+      </li>
     </ul>
   </Layout>
 )

e2e-tests/production-runtime/src/pages/redirect-search-hash.js

@@ -0,0 +1,11 @@
+import * as React from "react"
+
+import Layout from "../components/layout"
+
+const RedirectSearchHash = () => (
+  <Layout>
+    <p>This should be a page that also has search & hash</p>
+  </Layout>
+)
+
+export default RedirectSearchHash

packages/gatsby/cache-dir/navigation.js

@@ -90,6 +90,10 @@ const navigate = (to, options = {}) => {
     // If the loaded page has a different compilation hash to the
     // window, then a rebuild has occurred on the server. Reload.
     if (process.env.NODE_ENV === `production` && pageResources) {
+      // window.___webpackCompilationHash gets set in production-app.js after navigationInit() is called
+      // So on a direct visit of a page with a browser redirect this check is truthy and thus the codepath is hit
+      // While the resource actually exists, but only too late
+      // TODO: This should probably be fixed by setting ___webpackCompilationHash before navigationInit() is called
       if (
         pageResources.page.webpackCompilationHash !==
         window.___webpackCompilationHash
@@ -105,7 +109,7 @@ const navigate = (to, options = {}) => {
           })
         }
 
-        window.location = pathname
+        window.location = pathname + search + hash
       }
     }
     reachNavigate(to, options)