fix(gatsby): trigger location effects in navigation (#27594)

* creating test to detect effect change

* creating page for e2e test

* changing comparison to run on all route changes

e2e-tests/development-runtime/cypress/integration/navigation/linking.js

@@ -143,6 +143,24 @@ describe(`navigation`, () => {
     })
   })
 
+  describe(`All location changes should trigger an effect`, () => {
+    beforeEach(() => {
+      cy.visit(`/navigation-effects`).waitForRouteChange()
+    })
+
+    it(`should trigger an effect after a search param has changed`, () => {
+      cy.getTestElement(`effect-message`).invoke(`text`).should(`eq`, `Waiting for effect`)
+      cy.getTestElement(`send-search-message`).click().waitForRouteChange()
+      cy.getTestElement(`effect-message`).invoke(`text`).should(`eq`, `?message=searchParam`)
+    })
+
+    it(`should trigger an effect after the hash has changed`, () => {
+      cy.getTestElement(`effect-message`).invoke(`text`).should(`eq`, `Waiting for effect`)
+      cy.getTestElement(`send-hash-message`).click().waitForRouteChange()
+      cy.getTestElement(`effect-message`).invoke(`text`).should(`eq`, `#message-hash`)
+    })
+  })
+
   describe(`Route lifecycle update order`, () => {
     it(`calls onPreRouteUpdate, render and onRouteUpdate the correct amount of times on route change`, () => {
       cy.lifecycleCallCount(`onPreRouteUpdate`).should(`eq`, 1)

e2e-tests/development-runtime/src/pages/navigation-effects.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from "react"
+import { navigate } from "gatsby"
+
+import Layout from "../components/layout"
+
+export default function NavigationEffects({ location }) {
+  const [message, setMessage] = useState("Waiting for effect")
+
+  const searchParam = location.search
+  const searchHash = location.hash
+
+  useEffect(() => {
+    setMessage(searchParam)
+  }, [searchParam])
+
+  useEffect(() => {
+    setMessage(searchHash)
+  }, [searchHash])
+
+  const handleClick = next => navigate(`${next}`, { replace: true })
+
+  return (
+    <Layout>
+      <h1 data-testid="effect-message">{message}</h1>
+
+      <button
+        data-testid="send-search-message"
+        onClick={() => handleClick("?message=searchParam")}
+      >
+        Send Search
+      </button>
+      <button
+        data-testid="send-hash-message"
+        onClick={() => handleClick("#message-hash")}
+      >
+        Send Hash
+      </button>
+    </Layout>
+  )
+}

packages/gatsby/cache-dir/navigation.js

@@ -208,7 +208,7 @@ class RouteUpdates extends React.Component {
   }
 
   shouldComponentUpdate(prevProps) {
-    if (this.props.location.pathname !== prevProps.location.pathname) {
+    if (this.props.location.href !== prevProps.location.href) {
       onPreRouteUpdate(this.props.location, prevProps.location)
       return true
     }
@@ -217,7 +217,7 @@ class RouteUpdates extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.location.pathname !== prevProps.location.pathname) {
+    if (this.props.location.href !== prevProps.location.href) {
       onRouteUpdate(this.props.location, prevProps.location)
     }
   }