fix: use matchPath to trick reach router to match router (#11)

.circleci/config.yml

@@ -67,7 +67,7 @@ jobs:
       - attach_workspace:
           at: ./
       # Build plugin
-      - run: yarn build
+      - run: yarn lint
 
   build:
     executor: node

.eslintrc.js

@@ -12,7 +12,7 @@ module.exports = {
     }
   },
   rules: {
-    indent: ['error', 2],
+    'indent': ['error', 2, { 'SwitchCase': 1 }],
     'linebreak-style': ['error', 'unix'],
   },
   overrides: [

e2e-tests/asset-prefix/cypress/integration/navigation.js

@@ -28,4 +28,11 @@ describe('Navigation', function() {
 
     cy.get('[data-page]').should(`have.attr`, `data-page`, '1');
   });
+
+  it('A random rewritten url works in gatsby', () => {
+    cy.visit('http://localhost:3000/random-page');
+    cy.get('[data-page]').should(`have.attr`, `data-page`, 'random');
+
+    cy.get('#mytext').contains('hydrated');
+  });
 });

e2e-tests/asset-prefix/server.js

@@ -16,6 +16,11 @@ app
       req.path = '/external' + req.url;
     }
 
+    if (req.url === '/random-page') {
+      req.url = '/external/page-different-url';
+      req.path = '/external/page-different-url';
+    }
+
     next();
   })
   .use('/external', assets)
@@ -29,6 +34,7 @@ app
       <li style="margin-bottom: 0px;"><a href="/page-2">Go back to page 2</a></li>
       <li style="margin-bottom: 0px;"><a href="/page-3">Go back to page 3</a></li>
       <li style="margin-bottom: 0px;"><a href="/page-4">Go back to page 4</a></li>
+      <li style="margin-bottom: 0px;"><a href="/random-page">Go back to random-page</a></li>
     </ul>
     `);
   })
@@ -42,6 +48,7 @@ app
       <li style="margin-bottom: 0px;"><a href="/">Go back to the homepage</a></li>
       <li style="margin-bottom: 0px;"><a href="/page-3">Go back to page 3</a></li>
       <li style="margin-bottom: 0px;"><a href="/page-4">Go back to page 4</a></li>
+      <li style="margin-bottom: 0px;"><a href="/random-page">Go back to random-page</a></li>
     </ul>
     `);
   })

e2e-tests/asset-prefix/src/components/pageList.js

@@ -9,11 +9,22 @@ export default function PageList({ hidePage }) {
       continue;
     }
 
-    pages.push(
-      <Link to={i === 1 ? '/' : `/page-${i}`}>
-        Go back to {i === 1 ? 'the homepage' : `page ${i}`}
-      </Link>
-    );
+    let page;
+    switch (i) {
+      case 1: {
+        page = <Link to="/">Go back to the homepage</Link>;
+        break;
+      }
+      case 5: {
+        page = <Link to="/random-page">Random page</Link>;
+        break;
+      }
+      default: {
+        page = <Link to={`/page-${i}`}>Go back to {`page ${i}`}</Link>;
+      }
+    }
+
+    pages.push(page);
   }
 
   return (

e2e-tests/asset-prefix/src/pages/page-different-url.js

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from 'react';
+
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+import PageList from '../components/pageList';
+
+const ClientOnly = () => {
+  const [text, setText] = useState('');
+
+  useEffect(() => {
+    setText('hydrated');
+  }, []);
+
+  return <span id="mytext">{text}</span>;
+};
+
+const RandomPage = () => (
+  <Layout>
+    <SEO title="Page random url" />
+    <h1 data-page="random">Hi from the random page</h1>
+    <p>Welcome to a random page</p>
+    <ClientOnly />
+    <PageList hidePage={5} />
+  </Layout>
+);
+
+export default RandomPage;

src/gatsby-browser.js

@@ -11,25 +11,44 @@ exports.onClientEntry = () => {
   const pagePath = window.pagePath;
   const location = window.location;
 
-  if (pagePath !== location.pathname && pagePath !== location.pathname + '/') {
+  if (
+    pagePath &&
+    pagePath !== location.pathname &&
+    pagePath !== location.pathname + '/'
+  ) {
     const originalLoadPageSync = loader.loadPageSync;
     const originalLoadPage = loader.loadPage;
 
     loader.loadPageSync = path => {
+      let pageResources;
       // if the path is the same as our current page we know it's not a prefetch
       if (path === location.pathname) {
-        return originalLoadPageSync(pagePath);
+        pageResources = originalLoadPageSync(pagePath);
+      } else {
+        pageResources = originalLoadPageSync(path);
       }
 
-      return originalLoadPageSync(path);
+      if (pageResources.page) {
+        pageResources.page.matchPath = '*';
+      }
+
+      return pageResources;
     };
+
     loader.loadPage = path => {
+      let pageResources;
       // if the path is the same as our current page we know it's not a prefetch
       if (path === location.pathname) {
-        return originalLoadPage(pagePath);
+        pageResources = originalLoadPage(pagePath);
+      } else {
+        pageResources = originalLoadPage(path);
+      }
+
+      if (pageResources.page) {
+        pageResources.page.matchPath = '*';
       }
 
-      return originalLoadPage(path);
+      return pageResources;
     };
   }