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

Question

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

中为此创建了一个客户端路由

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

它按预期工作。

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

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

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

我怎样才能做到这一点？

Answer 1

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

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

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

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

Gatsby client-side routes with multiple params