Fix onRouteUpdate & onPreRouteUpdate

packages/gatsby/cache-dir/navigation.js

@@ -33,25 +33,16 @@ function maybeRedirect(pathname) {
   }
 }
 
-let lastNavigateToLocationString = null
-
-globalHistory.listen(() => {
-  const location = globalHistory.location
+const onPreRouteUpdate = location => {
   if (!maybeRedirect(location.pathname)) {
-    // Check if we already ran onPreRouteUpdate API
-    // in navigateTo function
-    if (
-      lastNavigateToLocationString !==
-      `${location.pathname}${location.search}${location.hash}`
-    ) {
-      apiRunner(`onPreRouteUpdate`, { location })
-    }
-    // Make sure React has had a chance to flush to DOM first.
-    setTimeout(() => {
-      apiRunner(`onRouteUpdate`, { location })
-    }, 0)
+    apiRunner(`onPreRouteUpdate`, { location })
+  }
+}
+const onRouteUpdate = location => {
+  if (!maybeRedirect(location.pathname)) {
+    apiRunner(`onRouteUpdate`, { location })
   }
-})
+}
 
 const navigate = (to, replace) => {
   let { pathname } = parsePath(to)
@@ -78,10 +69,6 @@ const navigate = (to, replace) => {
     })
   }, 1000)
 
-  lastNavigateToLocationString = to
-
-  apiRunner(`onPreRouteUpdate`, { location: window.location })
-
   const loaderCallback = pageResources => {
     if (!pageResources) {
       // We fetch resources for 404 page in page-renderer.js. Calling it
@@ -132,4 +119,4 @@ function init() {
   maybeRedirect(window.location.pathname)
 }
 
-export { init, shouldUpdateScroll }
+export { init, shouldUpdateScroll, onRouteUpdate, onPreRouteUpdate }

packages/gatsby/cache-dir/production-app.js

@@ -4,7 +4,12 @@ import ReactDOM from "react-dom"
 import { Router } from "@reach/router"
 import { ScrollContext } from "gatsby-react-router-scroll"
 import domReady from "domready"
-import { shouldUpdateScroll, init as navigationInit } from "./navigation"
+import {
+  shouldUpdateScroll,
+  init as navigationInit,
+  onRouteUpdate,
+  onPreRouteUpdate,
+} from "./navigation"
 import emitter from "./emitter"
 window.___emitter = emitter
 import PageRenderer from "./page-renderer"
@@ -29,12 +34,12 @@ apiRunnerAsync(`onClientEntry`).then(() => {
     require(`./register-service-worker`)
   }
 
-  // Call onRouteUpdate on the initial page load.
-  apiRunner(`onRouteUpdate`, {
-    location: window.history.location,
-  })
-
   class RouteHandler extends React.Component {
+    constructor(props) {
+      super(props)
+      onPreRouteUpdate(props.location)
+    }
+
     render() {
       const { location } = this.props
       let child
@@ -67,6 +72,20 @@ apiRunnerAsync(`onClientEntry`).then(() => {
         </ScrollContext>
       )
     }
+
+    // Call onRouteUpdate on the initial page load.
+    componentDidMount() {
+      onRouteUpdate(this.props.location)
+    }
+
+    shouldComponentUpdate() {
+      onPreRouteUpdate(this.props.location)
+      return true
+    }
+
+    componentDidUpdate() {
+      onRouteUpdate(this.props.location)
+    }
   }
 
   loader.getResourcesForPathname(window.location.pathname, () => {

packages/gatsby/cache-dir/root.js

@@ -1,7 +1,12 @@
 import React, { createElement } from "react"
 import { Router } from "@reach/router"
 import { ScrollContext } from "gatsby-react-router-scroll"
-import { shouldUpdateScroll, init as navigationInit } from "./navigation"
+import {
+  shouldUpdateScroll,
+  init as navigationInit,
+  onRouteUpdate,
+  onPreRouteUpdate,
+} from "./navigation"
 import { apiRunner } from "./api-runner-browser"
 import syncRequires from "./sync-requires"
 import pages from "./pages.json"
@@ -43,12 +48,12 @@ if (window.__webpack_hot_middleware_reporter__ !== undefined) {
 
 navigationInit()
 
-// Call onRouteUpdate on the initial page load.
-apiRunner(`onRouteUpdate`, {
-  location: window.history.location,
-})
-
 class RouteHandler extends React.Component {
+  constructor(props) {
+    super(props)
+    onPreRouteUpdate(props.location)
+  }
+
   render() {
     const { location } = this.props
     const { pathname } = location
@@ -84,6 +89,20 @@ class RouteHandler extends React.Component {
       </ScrollContext>
     )
   }
+
+  // Call onRouteUpdate on the initial page load.
+  componentDidMount() {
+    onRouteUpdate(this.props.location)
+  }
+
+  shouldComponentUpdate() {
+    onPreRouteUpdate(this.props.location)
+    return true
+  }
+
+  componentDidUpdate() {
+    onRouteUpdate(this.props.location)
+  }
 }
 
 const Root = () =>