Невозможно использовать gatsby-plugin-intl для одностраничного сайта

Question

я использую Gatsbyи я хочу создать одностраничный сайт, поэтому без создания страниц. Для этого я отредактировал gatsby-node.jsсо следующим кодом:

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

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

в этом случае каждый запрос перенаправляется на единственную страницу. Затем на странице у меня есть:

      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с текущей локалью, чтобы соответствовать правильному пути. Этот механизм отлично работает только для домашней страницы, но не работает для других ссылок. Infact, если я посещаю что-то вроде:

      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в конфигурации плагина и с префиксом ссылки с локалью, сайт перенаправляет меня на домашний компонент.

Answer 1

Если вы создаете SPA ( одностраничное приложение , обратите внимание на сингл ) , у вас не будет созданных страниц, кроме index. Вы пытаетесь получить доступ к /categoryстраница, которая не создана из-за:

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

Вот почему ваши маршруты не работают (или, другими словами, работает только домашняя страница).

Адаптируйте предыдущее условие к своим потребностям, чтобы позволить создавать больше страниц в соответствии с вашими требованиями.

Я использую Gatsby и хочу создать одностраничный сайт, поэтому без создания страниц. Для этого я отредактировал gatsby-node.js следующим кодом:

Бессмысленно пытаться создать SPA-приложение с Gatsby (без создания страниц), а затем жаловаться, потому что не создана страница коллекции.

Убедитесь, что вы понимаете, что делаете, кажется очевидным, что вам нужно динамически создавать страницы для каждого collection, season, а также productпоэтому ваш подход к созданию SPA не будет работать для вашего варианта использования.

Можно ли оставить только index.js без чрезмерного усложнения? Я просто хочу понять, почему мой код не работает, потому что я передал правильный URL-адрес... Удаление локализации Gatsby работает, поэтому я подозреваю, что проблема с локализацией

Единственный способ, которым http://localhost:3001/category-home/prod-foo(удаление локализации) можно решить, создав такую ​​структуру папок, /pages/category-home/prod-foo.js(поскольку Гэтсби экстраполирует структуру папок как URL-адреса), поэтому, если вы хотите использовать локализацию, используя свой подход, добавьте такую ​​структуру en/pages/category-home/prod-foo.jsа также es/pages/category-home/prod-foo.js(или любую другую локаль) и так далее. На мой взгляд, это слишком сложно, поскольку для каждой категории вам нужно создать 2 (даже больше, в зависимости от локалей) файлов.

Gatsby позволяет создавать динамические страницы и автоматически интерполировать локаль с помощью встроенных в процесс плагинов, создавая каждый файл для специально определенных локалей.