Support for client routes

[igor-krupa]

Hello.
Is there support for client routes?
I've noticed that everything that's wrapped in Router from @reach/router is not being displayed at all when using this plugin.
It's displayed only on index page when using redirect: false option (so on / route). But every other language index doesn't display what's in Router.
Is there maybe some option for that?
I'm not using any other plugin that can conflict with that.

[Steffi3rd]

+1

Yes please.

[mmmoli]

Did anyone come up with anything?

[mmmoli]

This worked for me: (note: I'm re-routing to "/me"):

const re = /^\/([\w-]+)\/me/;
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions;

  const match = re.exec(page.path);
  // Only update the `/me` page.
  if (match) {
    // page.matchPath is a special key that's used for matching pages
    // with corresponding routes only on the client.
    page.matchPath = `${match[0]}/*`;
    // Update the page.
    createPage(page);
  }
};

[jayjayzheng]

Thanks @mmmoli ! Worked out perfectly for me

[blazelon]

Extending @mmmoli 's solution, for multiple routes the following could be added to gatsby-node.js

exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions
  const matchPathProducts = page.path.match(/^\/([\w-]+)\/products/)
  const matchPathProduct = page.path.match(/^\/([\w-]+)\/product/)
  const matchPathUser = page.path.match(/^\/([\w-]+)\/user/)

  if (matchPathProducts) {
    page.matchPath = `${matchPathProducts[0]}/*`
    createPage(page)
  } else if (matchPathProduct) {
    page.matchPath = `${matchPathProduct[0]}/*`
    createPage(page)
  } else if (matchPathUser) {
    page.matchPath = `${matchPathUser[0]}/*`
    createPage(page)
  }
}

[ltremago]

+1

[mcarnoky001]

Worked above solutions but needed to add this to the router, for my "app" page, to listen for path change:
<Router basepath={`${intl.locale}`+"/app"}>