fix(gatsby): update location state when location.key changes

[universse]

Description

The component are ignoring updates to props.location when anything other than props.location.href changes.

Also, the discrepancy in behavior between dev and prod, as mentioned in #17960, is due to the difference in the way location is passed in LocationHandler.

// root.js
class LocationHandler extends React.Component {
  render() {
    let { location } = this.props

    if (!loader.isPageNotFound(location.pathname)) {
      return (
        <EnsureResources location={location}>
          {locationAndPageResources => (

            // location is from this.props
            <RouteUpdates location={location}>
              <ScrollContext
                location={location}
                shouldUpdateScroll={shouldUpdateScroll}
              >
                <Router
                  basepath={__BASE_PATH__}
                  location={location}
                  id="gatsby-focus-wrapper"
                >
                  <RouteHandler
                    path={encodeURI(
                      locationAndPageResources.pageResources.page.matchPath ||
                        locationAndPageResources.pageResources.page.path
                    )}
                    {...this.props}
                    {...locationAndPageResources}
                  />
                </Router>
              </ScrollContext>
            </RouteUpdates>
          )}
        </EnsureResources>
      )
    }

// production-app.js
class LocationHandler extends React.Component {
    render() {
      const { location } = this.props
      return (
        <EnsureResources location={location}>
          {({ pageResources, location }) => (

            // location is from render props
            <RouteUpdates location={location}>
              <ScrollContext
                location={location}
                shouldUpdateScroll={shouldUpdateScroll}
              >
                <Router
                  basepath={__BASE_PATH__}
                  location={location}
                  id="gatsby-focus-wrapper"
                >
                  <RouteHandler
                    path={encodeURI(
                      pageResources.page.path === `/404.html`
                        ? stripPrefix(location.pathname, __BASE_PATH__)
                        : pageResources.page.matchPath ||
                            pageResources.page.path
                    )}
                    {...this.props}
                    location={location}
                    pageResources={pageResources}
                    {...pageResources.json}
                  />
                </Router>
              </ScrollContext>
            </RouteUpdates>
          )}
        </EnsureResources>
      )
    }
  }

I wonder what the rationale was for this.

Related Issues

#17960

[wardpeet]

We can return location state as key always changes.

[wardpeet]

Thanks @universse, change looks great! Thanks for the investigation and fixing this! We can return location state as key always changes.

[universse]

I was overly cautious there. Thanks for reviewing!