reactjs - 如何从 Gatsby 的 route 删除 "/app"

Question

我已经设置了 gatsby 项目，并且由于这个 gatsby nodejs 文件，我的路由仅在包含 /app 时才有效。

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = "/app/*"

    // Update the page.
    createPage(page)
  }
}

我需要从我的所有组件中删除/app。可以这样做吗？

在生产模式下，我的动态路由也不起作用，问题是什么？

const App = () => (
  <Layout>
    <Router>
      <VerifyToken path="/app/:token"/>
      <MagicLink path="/app/link/:magicLink"/>
    </Router>
  </Layout>
)

Answer 1

gatsby-node.js 文件中的代码用于创建所谓的“client only routes ”。在 Gatsby 文档中，他们给出了一个示例，用于创建仅对登录用户可用的路由。这些路由仅存在于客户端上，不会与服务器上应用程序构建 Assets 中的文件相对应。

如果没有任何东西使用它，您可以消除 /app 路由。但仅根据您发布的示例组件，您的应用程序似乎正在使用它，并且您确实提到了“动态路由”。因此，您确实需要一些东西来识别这些路线并使它们对 Gatsby 来说很特别。

简而言之，这个“仅客户端路由”的含义是 Gatsby 不会为该路由创建任何服务器端页面。但是，您应该创建应用程序组件(最有可能是 React 组件)来响应该路由并动态构建内容。

/app 前缀没有什么特别的。你可以做任何你想要的，只要你的 Gatsby 配置和你的客户端组件以及你的客户端使用的路由器之间一致(希望 Gastby 已经内置了 @reach/router？)。但是要创建一个混合应用程序，其中某些内容由 Gatsby 在服务器端呈现，而某些内容则在客户端动态呈现，我很确定您需要某种前缀才能使其工作，以便 Gatsby 可以区分两者之间的区别如何渲染它们。然而，从Gatsby docs on page matchPath并不清楚。这是如何运作的。从 Gatsby 文档中的代码示例来看，它确实需要一个正则表达式。您可以尝试匹配路径中其他位置的其他字符串而不是路径开头的字符串，而不是 /app 。无论您做什么，都需要设置客户端路由器以匹配该路由。

我认为 Gatsby 文档没有那么好，所以我可以理解您为使其正常工作而付出的努力。这个Gatsby Mail App可能会对您有所帮助，因为它使用不同的前缀(/threads)，并且拥有使用客户端动态页面+静态内容的应用程序的完整源代码。

And also on production mode my dynamic routes does not work what is the issue?

用您提供的有限代码很难判断。这看起来并不是该组件的完整源代码。您的组件名称是 src/pages/app.js 还是 src/pages/app/index.js？这就是它需要被命名来处理 /app 前缀的路由。