Gatsby dynamic routing breaks upon gh-pages deploy

Question

I deployed my first Gatsby project to github pages:
repo: https://github.com/michal-kurz/stfuandclick
gh-pages: https://michal-kurz.github.io/stfuandclick/app/ (generated from gh-pages branch)

It has one page, src/pages/app.tsx, which uses use Reach Router for dynamic routing.

// app.tsx
const App = () => (
  <>
    <GlobalStyles />
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <Router>
          <Homepage path={`${BASE_URL}/app/`} />
          <Team path={`${BASE_URL}/app/team/:teamName/`} />
        </Router>
      </ThemeProvider>
    </Provider>
  </>
)

// gatsby-node.js
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  if (page.path.match(/^\/app/)) {
    page.matchPath = '/app/*'
    createPage(page)
  }
}

note: BASE_URL equals to /stfuandclick in production env version and '' in other envs

Everything works fine in development mode (gatsby develop), but on the deployed version, it is impossible to visit /team/:teamName without using /app/ as the app's entry point (going to /app/ and click the blue button works fine).

Opening the /team/:teamName link directly results in a 404 (unless previously cached by visiting it through /app/, but then ctrl + f5 results in 404 again).

At seems as if gatsby.node.js isn't doing it's job properly once app is deployed. I initialy suspected that it does't work at all, but apparently that's not the case, as commenting all the code out breaks the app even further (the team pages suddenly break even upon visited via link from /app).

I tried prefixing the paths in gatsby-node.js with BASE_URL in the production build like so:

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  if (page.path.match(/^\/stfuandclick\/app/)) {
    page.matchPath = '/stfuandclick/app/*'
    createPage(page)
  }
}

and also prefixing each of the two paths in gatsby-node.js individually, but with no luck.

I do have pathPrefix in my gatsby-config.json: (full config here)

module.exports = {
  pathPrefix: '/stfuandclick',
  // ...
}

and I deploy with the following yarn script: (full package.json here)

"deploy": "gatsby build --prefix-paths && gh-pages -d public"

What can I do to make my routing work?

Answer 1

I faced a similar issue while working on vickywords. I hosted my site on Vercel. Basically, the server is trying to locate the document by path dynamic-route/param/ and it is not aware of dynamic routes. So it is throwing a 404 error.

To fix that, I had to make 2 changes in my source code.

1. In the 404.js file I made the below changes to get rid of 404 flashing. In my case, I was seeing a 404 error in the browser console. source

const browser = typeof window !== "undefined" && window;

return browser && <NotFoundPage />;

2. In vercel.json file I had to add redirects to the root page like below.

{ "rewrites": [{ "source": "/word-finder/(.*)", "destination": "/word-finder" }] }

There is one issue I noticed, word-finder page is the root page for my dynamic route with some text. When a user searches for something, I simply redirect to the same page with parameters that will render dynamic content. I see the flashing of my root page with text before seeing the actual content. I believe it is due to that URL redirect.

Note: If anyone is using Netlify, they can add the same behavior in the _redirect file. Make sure to put it in the static folder so that it will get copied after deployment.