Gatsby client-side routes with multiple params

Question

Users can have their own profile pages much like Twitter etc and is accessible via http://example.com/username. Because there are thousands of users I'm handling this dynamically and have created a client side route for this in my onCreatePage:

  if (page.path.match(/^\/user\/$/)) {
    createPage({
      ...page,
      matchPath: '/:identifier'
    })
  }

And it works as expected.

But users can also have "sub pages" that are also dynamic and should be client only, i.e. http://example.com/username/somepage. somepage is just a placeholder here but it referneces an asset ID which again there are potentially thousands of. So I would expect something like this to work:

  if (page.path.match(/^\/asset\/$/)) {
    createPage({
      ...page,
      matchPath: '/:identifier/:slug'
    })
  }

But it doesn't. It routes to the 404 page. I've also tried /:identifier/*.

How can I achieve this?

user_5585371 · Answer

The initial slug to create the page (createPage) is handled by Gatsby in order to create the matching pages so I think leaving the code just like this should work:

  if (page.path.match(/^\/user\/$/)) {
    createPage({
      ...page,
      matchPath: '/:identifier/*'
    })
  }

The rest of URL parameters, can be handled by the router, with something like:

Gatsby client-side routes with multiple params

1 Answers