单页网站不能使用 gatsby-plugin-intl

问题描述

我正在使用 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`
        ),},

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

解决方法

如果您正在创建 SPA（S单P年龄A应用程序，请注意单）您除了 index.html 之外，不会有任何创建的页面。您正在尝试访问未创建的 /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 允许您创建动态页面并使用进程中的内置插件自动插入语言环境，为特定定义的语言环境创建每个文件。