Component path prop is matched but is not rendered using client-only route in Gatsby

Question

I'm trying to get Reach Router in Gatsby to navigate programmatically from one of my components. The URL is updated as expected however the route is not rendered and the Gatsby static routes list are displayed.

My code

    <Router>
      <PageTest1 default />
      <PageTest2 path="/test2"/>
      <PageTest3 path="/test3"/>
    </Router>

The default component is renderd but not others. How can I get it to render components?

Answer 1

You need to tell Gatsby about the routes so it knows which component to use to render those pages, as documented here.

// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  // Only update the `/app` page.
  if (page.path.match(/^\/app/)) {
    // page.matchPath is a special key that's used for matching pages
    // with corresponding routes only on the client.
    page.matchPath = "/app/*"
    // Update the page.
    createPage(page)
  }
}