如何从gatsby的路由中删除“ / app”

Question

我已经安装了gatsby项目，并且/app由于这个gatsbynodejs文件，我的路线仅在包含它时才起作用。

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文件中的代码用于创建所谓的“仅客户端路由”。在 Gatsby 文档中，他们给出了一个示例，用于创建仅对登录用户可用的路由。这些路由将仅存在于客户端上，不会对应于服务器上应用程序构建资产中的文件。

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

简而言之，这个“仅客户端路由”的意思是 Gatsby 不会为该路由创建任何服务器端页面。但是你应该创建应用程序组件（很可能是 React 组件）来响应该路由并动态构建内容。

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

我不认为 Gatsby 文档那么好，所以我可以理解你试图让它发挥作用的努力。这个Gatsby 邮件应用程序可能会帮助您，因为它使用不同的前缀 ( /threads) 并且具有使用客户端动态页面 + 静态内容的应用程序的完整源代码。

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

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