fix(gatsby): Fix client side routing match paths regression (#15010)

* export loader.findMatchPath

* reorganize production-app explicit navigate if statement

* strip BASE_PATH prefix before finding matchPath

* Add end to end tests

* Remove screenshots

* Update tests

* Add .gitignore

* Move tests to development runtime

* Hard code path in tests

* Remove serve e2e tests

* Add tests in production runtime

e2e-tests/development-runtime/cypress/integration/functionality/paths.js

@@ -0,0 +1,11 @@
+describe(`develop`, () => {
+  it(`works with the client side path`, () => {
+    cy.visit(`/paths/app`).waitForRouteChange()
+    cy.get(`h1`).contains(`App Page`)
+  })
+
+  it(`works with a child of the client side path`, () => {
+    cy.visit(`/paths/app/12345`).waitForRouteChange()
+    cy.get(`h1`).contains(`Not Found in App`)
+  })
+})

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

@@ -78,3 +78,13 @@ exports.createPages = async function createPages({
     })
   })
 }
+
+exports.onCreatePage = async ({ page, actions }) => {
+  const { createPage } = actions
+
+  if (page.path.match(/^\/paths/)) {
+    page.matchPath = `/paths/*`
+  }
+
+  createPage(page)
+}

e2e-tests/development-runtime/src/pages/paths.js

@@ -0,0 +1,15 @@
+import { Router } from "@reach/router"
+import React from "react"
+
+const App = () => <h1>App Page</h1>
+
+const NotFound = () => <h1>Not Found in App</h1>
+
+const AppPage = () => (
+  <Router>
+    <App path="/paths/app" />
+    <NotFound default />
+  </Router>
+)
+
+export default AppPage

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

@@ -0,0 +1,11 @@
+describe(`serve`, () => {
+  it(`works with the client side path`, () => {
+    cy.visit(`/paths/app`).waitForRouteChange()
+    cy.get(`h1`).contains(`App Page`)
+  })
+
+  it(`works with a child of the client side path`, () => {
+    cy.visit(`/paths/app/12345`).waitForRouteChange()
+    cy.get(`h1`).contains(`Not Found in App`)
+  })
+})

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

@@ -27,4 +27,8 @@ exports.onCreatePage = ({ page, actions }) => {
       })
       break
   }
+  if (page.path.match(/^\/paths/)) {
+    page.matchPath = `/paths/*`
+    actions.createPage(page)
+  }
 }

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

@@ -0,0 +1,15 @@
+import { Router } from '@reach/router'
+import React from 'react'
+
+const App = () => <h1>App Page</h1>
+
+const NotFound = () => <h1>Not Found in App</h1>
+
+const AppPage = () => (
+  <Router>
+    <App path="/paths/app" />
+    <NotFound default />
+  </Router>
+)
+
+export default AppPage

packages/gatsby/cache-dir/loader.js

@@ -26,7 +26,7 @@ if (process.env.NODE_ENV !== `production`) {
 // Cache for `cleanAndFindPath()`. In case `match-paths.json` is large
 const cleanAndFindPathCache = {}
 
-const findMatchPath = (matchPaths, trimmedPathname) => {
+const findMatchPath = trimmedPathname => {
   for (const { matchPath, path } of matchPaths) {
     if (match(matchPath, trimmedPathname)) {
       return path
@@ -66,7 +66,7 @@ const cleanAndFindPath = rawPathname => {
     return cleanAndFindPathCache[trimmedPathname]
   }
 
-  let foundPath = findMatchPath(matchPaths, trimmedPathname)
+  let foundPath = findMatchPath(trimmedPathname)
   if (!foundPath) {
     if (trimmedPathname === `/index.html`) {
       foundPath = `/`
@@ -371,6 +371,8 @@ const queue = {
 
   doesPageHtmlExistSync: rawPath =>
     pageHtmlExistsResults[cleanAndFindPath(rawPath)],
+
+  findMatchPath,
 }
 
 export const postInitialRenderWork = () => {

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

@@ -15,6 +15,7 @@ import asyncRequires from "./async-requires"
 import matchPaths from "./match-paths.json"
 import loader, { setApiRunnerForLoader } from "./loader"
 import EnsureResources from "./ensure-resources"
+import stripPrefix from "./strip-prefix"
 
 window.asyncRequires = asyncRequires
 window.___emitter = emitter
@@ -62,17 +63,23 @@ apiRunnerAsync(`onClientEntry`).then(() => {
   }
 
   const { pagePath, location: browserLoc } = window
+
+  // Explicitly call navigate if the canonical path (window.pagePath)
+  // is different to the browser path (window.location.pathname). But
+  // only if NONE of the following conditions hold:
+  //
+  // - The url matches a client side route (page.matchPath)
+  // - it's a 404 page
+  // - it's the offline plugin shell (/offline-plugin-app-shell-fallback/)
   if (
-    // Make sure the window.page object is defined
     pagePath &&
-    // The canonical path doesn't match the actual path (i.e. the address bar)
     __BASE_PATH__ + pagePath !== browserLoc.pathname &&
-    // Ignore 404 pages, since we want to keep the same URL
-    pagePath !== `/404.html` &&
-    !pagePath.match(/^\/404\/?$/) &&
-    // Also ignore the offline shell (since when using the offline plugin, all
-    // pages have this canonical path)
-    !pagePath.match(/^\/offline-plugin-app-shell-fallback\/?$/)
+    !(
+      loader.findMatchPath(stripPrefix(browserLoc.pathname, __BASE_PATH__)) ||
+      pagePath === `/404.html` ||
+      pagePath.match(/^\/404\/?$/) ||
+      pagePath.match(/^\/offline-plugin-app-shell-fallback\/?$/)
+    )
   ) {
     navigate(__BASE_PATH__ + pagePath + browserLoc.search + browserLoc.hash, {
       replace: true,