具有多个参数的 Gatsby 客户端路由答案

【问题标题】：Gatsby client-side routes with multiple params具有多个参数的 Gatsby 客户端路由
【发布时间】：2021-08-10 04:41:27
【问题描述】：

用户可以拥有自己的个人资料页面，就像 Twitter 等一样，可以通过http://example.com/username 访问。因为有成千上万的用户，我正在动态处理这个问题，并在我的onCreatePage 中为此创建了一个客户端路由：

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

它按预期工作。

但用户也可以拥有“子页面”，它们也是动态的，并且应该只是客户端，即http://example.com/username/somepage。 somepage 在这里只是一个占位符，但它引用了一个 asset ID，这又可能有数千个。所以我希望这样的事情能够奏效：

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

但事实并非如此。它路由到 404 页面。我也试过/:identifier/*。

我怎样才能做到这一点？

【问题讨论】：

【解决方案1】：

创建页面 (createPage) 的初始 slug 由 Gatsby 处理，以便创建匹配页面，所以我认为像这样保留代码应该可以工作：

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

其余的 URL 参数，可以由路由器处理，例如：

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

【讨论】：

你带领我走上了正确的道路。我只能通过将 matchPath 更改为 matchPath: '/:identifier/*' 来获得所需的行为，并且在我的路由器索引中，我可以删除 /user/ 位以获得我想要的。谢谢！
当您评论它时，我正在编辑答案以添加星号以匹配 identifier 下的所有页面 xD。我很高兴它对你有所帮助。编码愉快！