0

我正在使用Gatsby，我想建立一个单页网站，所以没有创建页面。为此，我gatsby-node.js使用以下代码进行了编辑：

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  if (page.path === "/") {
    page.matchPath = "/*"
    createPage(page)
  }
}

在这种情况下，每个请求都会重新路由到index.js唯一的页面。然后，在index.js我的页面中：

const IndexPage = () => {
  const intl = useIntl()
  const locale = intl.locale

  return (
    <BGTState>
      <BlogState>
        <Layout>
          <Router>
            <Home path={`${locale}/`} />
            <Section path={`${locale}/:sectionSlug`} />
            <Collection path={`${locale}/:sectionSlug/:collectionSlug`} />
            <Season
              path={`${locale}/:categorySlug/:collectionSlug/:seasonSlug`}
            />
            <Product
              path={`${locale}/:categorySlug/:collectionSlug/:seasonSlug/:prodSlug`}
            />
            <Blog path={`${locale}/blog`} />
            <Article path={`${locale}/blog/:articleSlug`} />
            <NotFound default />
          </Router>
        </Layout>
      </BlogState>
    </BGTState>
  )
}

如您所见，我有不同的路由器根据 url 加载特定组件。我已经为每个区域添加path了当前语言环境的前缀以匹配正确的路径。此机制仅适用于主页，但对于其他链接不起作用。事实上，如果我访问类似：

http://localhost:3001/en/category-home/prod-foo

必须加载Collection组件，站点只需重定向到：

http://localhost:3001/en

并再次显示该Home组件。

我做错了什么？

更新

页面结构：

在此处输入图像描述

正如你所看到的，我只index.js处理了我在gatby-node.js. 如果我删除本地化插件，至少使用此配置：

 {
      resolve: `gatsby-plugin-intl`,
      options: {
        // Directory with the strings JSON
        path: `${__dirname}/src/languages`,
        // Supported languages
        languages: ["it", "en", "ci", "fr"],
        // Default site language
        defaultLanguage: `it`,
        // Redirects to `it` in the route `/`
        //redirect: true,
        // Redirect SEO component
        redirectComponent: require.resolve(
          `${__dirname}/src/components/redirect.js`
        ),
      },
    },

而且我没有在 url 前面加上前缀intl.locale，一切正常。但是添加redirect: true插件配置，并在链接前加上语言环境，站点将我重定向到主组件。

4

1 回答 1

0

如果您正在创建 SPA（单页应用程序，请注意单页），您将不会有任何已创建的页面，而是索引。您正在尝试访问未创建的页面，原因是：/category

  if (page.path === "/") {
    page.matchPath = "/*"
    createPage(page)
  }

这就是为什么您的路线不起作用（或者换句话说，只有主页起作用）。

根据您的需要调整以前的条件，以允许根据您的要求创建更多页面。

我正在使用 Gatsby，我想构建一个单页站点，因此无需创建页面。为此，我使用以下代码编辑了 gatsby-node.js：

试图用 Gatsby 构建一个 SPA 应用程序（不创建页面）但随后抱怨因为没有创建集合页面是无意义的。

确保您了解自己在做什么，显然您需要为每个collection,动态创建页面season，product因此您创建 SPA 的方法不适用于您的用例。

可以只保留 index.js 而不会使事情变得过于复杂吗？我只是想了解为什么我的代码无法正常工作，因为我传递了正确的 url... 删除本地化 Gatsby 有效，所以我怀疑存在本地化问题

http://localhost:3001/category-home/prod-foo可以解决（删除本地化）的唯一方法是创建一个文件夹结构，例如/pages/category-home/prod-foo.js（因为 Gatsby 将文件夹结构外推为 URL），因此，如果您想使用您的方法使用本地化，请添加一个结构en/pages/category-home/prod-foo.js和es/pages/category-home/prod-foo.js（或无论语言环境），等等。在我看来，这是过于复杂的东西，因为对于每个类别，您都需要创建 2 个（甚至更多取决于语言环境）文件。

Gatsby 允许您创建动态页面并使用进程中的内置插件自动插入语言环境，为特定定义的语言环境创建每个文件。

于 2020-12-21T12:04:08.180 回答