Question

我已经安装了gatsby项目，并且由于该partition-key nodejs文件，我的路线仅在包含/app时有效。

gatsby

我需要从所有组件中删除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

Answer 1

您的gatsby-node.js文件中的代码用于创建所谓的“ client only routes”。在Gatsby文档中，他们提供了一个示例，该示例用于创建仅对登录用户可用的路由。这些路由仅在客户端上存在，并且与服务器上应用程序内置资源中的文件不对应。

如果没有使用/app路由，则可以消除它。但是仅基于您发布的示例组件，您的应用似乎正在使用它，并且您确实提到了“动态路线”。因此，您确实需要某物来识别那些路线，并使它们对盖茨比特别。

简而言之，该“仅客户端路由”应该表示Gatsby不会为该路由创建任何服务器端页面。但是然后您应该创建将响应该路由并动态构建内容的应用程序组件（最可能是React组件）。

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

我认为Gatsby文档并不那么出色，因此我可以理解您为使此功能发挥作用而付出的努力。 Gatsby Mail App可能会为您提供帮助，因为它使用了不同的前缀（/threads），并且具有使用客户端动态页面+静态内容的应用程序的完整源代码。

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

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

Answer 2

要从路由中删除/ app，您必须在pages文件夹中定义名为files的起始路径。例如，您希望您的主页使用{your-domain} / home进行渲染，只需在pages文件夹中添加一个名为home.js的文件，然后在其中导入组件即可。

import React from "react";
import HomePage from "../features/home/Home.index";


const Home = () => (
  <HomePage />
);

export default Home;

Answer 3

要启用不带前缀（仅/ app）的仅客户端路由，请按以下方式设置Gatsby。

在gatsby-node.js中：

exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions
  if (page.path === `/`) {
    page.matchPath = `/*`
    createPage(page)
  }
}

在index.js中：

const IndexPage = () => {
  return (
    <Router>
      <Home path="/" />
      <OtherPage path="/other-page" />
    </Router>
  )
}

export default IndexPage

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

3 个答案: