组件路径 prop 匹配但未在 Gatsby 中使用仅客户端路由呈现

Question

我正在尝试让 Gatsby 中的 Reach Router 以编程方式从我的组件之一进行导航。 URL 按预期更新，但未呈现路由并显示 Gatsby 静态路由列表。

我的代码

    <Router>
      <PageTest1 default />
      <PageTest2 path="/test2"/>
      <PageTest3 path="/test3"/>
    </Router>

渲染默认组件，但不渲染其他组件。我怎样才能让它渲染组件？

Answer 1

您需要将路由告知 Gatsby，以便它知道使用哪个组件来呈现这些页面，as documented here。

// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  // Only update the `/app` page.
  if (page.path.match(/^\/app/)) {
    // page.matchPath is a special key that's used for matching pages
    // with corresponding routes only on the client.
    page.matchPath = "/app/*"
    // Update the page.
    createPage(page)
  }
}

组件路径 prop 匹配但未在 Gatsby 中使用仅客户端路由呈现

Component path prop is matched but is not rendered using client-only route in Gatsby

reactjs

gatsby

reach-router