Doesn't work together with client routes and reach router

I’m using client routes in Gatsby together with gatsby-plugin-react-i18next. When I’m trying to access one of the client routes while not using the default language, e.g. the url is prefixed with /sv, then I get that the route doesn’t exists. If I add the prefix /sv to the router basepath, the Default component/path is working but not the Profile component/path.

While using the default language without the /sv prefix, everything is working as expected.

src/pages/account.tsx

<Router basepath={'/account'}>
  <AccountRoute path="/profile" component={Profile} />
  <Default path="/" />
</Router>

gatsby-node.js

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

    createPage(page)
  }
}

I’ve also tried to add the prefix /sv to the matchPath in gatsby-node.js but then I’m redirected to double prefixes /sv/sv route that doesn’t exists. If I tell gatsby-plugin-react-i18next to not generate language pages for the account pages, I get the same result.

gatsby-config.js

{
  resolve: `gatsby-plugin-react-i18next`,
  options: {
    ...
  },
  pages: [
    {
      matchPath: '/:lang?/account/(.*)',
      getLanguageFromPath: true
    },
  ]
}

[bebbi]

Does this help? (no custom plugin) https://stackoverflow.com/questions/67242212/gatsby-cant-find-client-routes-when-using-gatsby-plugin-react-i18next/69905274#69905274

[nithyananthan-s02]

Am facing the same issue. I tried the approaches specified above however, unfortunately, it is not working. Am getting route NOT FOUND error. Any updates on this ?