不能将gatsby-plugin-intl用于单页站点。

Question

我使用的是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，并在链接前加上区域设置，站点就会将我重定向到home组件。

Answer 1

如果要创建SPA (Single Page Application，注意single)，那么您将没有任何创建的页面，而是索引。您正在尝试访问未创建的/category页面，原因是：

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

这就是为什么您的路线不能工作(换句话说，只有主页才能工作)。

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

我正在使用盖茨比，我想要构建一个单一的页面站点，所以不需要创建页面。为此，我用以下代码编辑了gatsby-node.js：

尝试用Gatsby (不创建页面)构建SPA应用程序是没有意义的，但接着抱怨，因为没有创建集合页面。

确保您理解您正在做的事情，显然您需要为每个collection、season和product动态创建页面，这样您创建SPA的方法就不会适用于您的用例。

可以保留index.js而不会使事情变得过于复杂？我只想知道为什么我的代码不能工作，因为我已经传递了正确的url.删除本地化盖茨比工作，所以我怀疑存在本地化问题

解决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允许您创建动态页面，并在过程中使用内置插件自动插入区域设置，为特定定义的区域设置创建每个文件。