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