I'm trying to build a signup confirmation page in my Gatsby project. I began with the stater I created here https://github.com/DWboutin/gatsby-react-intl-starter.

In gatsby-node.js , I set a pageMatch prop to have my page to handle provided IDs. (Note that value is a part of my language building process)

if (page.path.match(/^\/client-side-page/)) { page.matchPath = (value !== baseLanguage) ? `/${value}/client-side-page/*` : '/client-side-page/*'; }

With that, I can access to the page /client-side-page/{MY ID} . In that page I use reach/router to retrieve the :id in the path and render the confirmation form only when it's provided.

Everything works, but, when I load the page directly, it's shows me the 404 component.

I tried to set a default route component, for when it can't find the good path. But it keeps showing me the 404 before showing it.

<Router basepath={`/${pageContext.matchPath.replace('/*', '/')}`}> <ClientSignupDefault default /> <ClientSignup path=":id" /> </Router>

Is there a way to do this or should I find another way to manage this?

Thank you for your help!