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

【问题标题】：Component path prop is matched but is not rendered using client-only route in Gatsby组件路径道具匹配但未在 Gatsby 中使用仅客户端路由呈现
【发布时间】：2021-03-17 20:11:01
【问题描述】：

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

我的代码

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

渲染默认组件，但不渲染其他组件。如何让它渲染组件？

【问题讨论】：

标签： reactjs gatsby reach-router

【解决方案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)
  }
}

【讨论】：