时间戳

首页 > 解决方案 > 具有多个参数的 Gatsby 客户端路由

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

问题描述

用户可以拥有自己的个人资料页面，就像 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/*。

我怎样才能做到这一点？

标签： reactjsreact-routergatsby

解决方案

createPageGatsby 处理了创建页面（

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

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

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

推荐阅读