CODEWITHSUNDEEP
reactjsreact-routergatsby
eth0
eth0

Reputation: 5137

Gatsby client-side routes with multiple params

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?

Upvotes: 2

Views: 245

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

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:

 <Router>
        <User path="/user/:identifier" />
        <UserAsset path="/user/:identifier/:asset" />
 </Router>

Upvotes: 1

Related Questions