Issues when trying to implement sub routing system on page created through "createPage"

Summary

I am struggling to implement a sub-routing system on a page which is created through createPage.

I need the default sub-route of the page to be built to static html but also, any subsequent sub-routes on the same page need to be client only. This has led to me having two routers for the same page. One on the template used for createPage and then one on the page component I use for the matchPath assignment.

The issue I am getting is that the template component is rendering for the default sub-route and then for any other sub-routes the page component is, resulting in full page flashes and data updating when it shouldn’t be.

Have replicated my approach in this codesandbox. Make sure to go to https://hkhbb.sse.codesandbox.io/test/foo/bar to see the output.

I go into detail about my issues on #14954. I thought I had got round the issue but it has since returned since updating to latest gatsby (2.13.45). Is this the correct approach when trying to achieve what I am trying to achieve?

Thanks!

EDIT: I should mention that I have around 25k pages generated which need to have this sub routing system on. I have tried adding a matchPath directly in createPage but this inflates the JS bundle massively because of an array containing matchPath data.

[herecydev]

The example I’ve put in there is unrelated to your issue here, but it highlights that there are multiple further ways that people want to use it.

It could be that the matchPaths is extended to allow user-defined functions:

//i.e. path is /posts/123/edit
path => {
if(path.match(/posts\/\d+/) {
// return the correct static route, i.e. /posts/123
} else {
return null
}

[pbrickles]

I have had a similar issue when trying to create a “tab”-like sub navigation on a page. I would be interested to see if the approach is valid or not.