問題タブ [gatsby-plugin-intl]

サイトを翻訳するためにintl、layout.js ファイルに次のように挿入しています。

しかし、プロジェクトに追加した後(この例gatsby-plugin-layoutに基づいて)、次のエラーが発生します。
Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

翻訳を保持しながら、このエラーを取り除くにはどうすればよいですか?

これは、関連する gatsby 構成部分です。

私が使用Gatsbyしていて、単一ページのサイトを構築したいので、ページを作成せずに。gatsby-node.jsこれを達成するために、次のコードで編集しました。

index.jsその場合、各リクエストは、唯一のページに再ルーティングされます。次に、index.js私が持っているページで：

ご覧のとおり、URL に基づいて特定のコンポーネントをロードするさまざまなルーターがあります。path正しいパスに一致するように、それぞれに現在のロケールをプレフィックスとして付けました。このメカニズムは、ホームページのみで正常に機能していますが、他のリンクでは機能していません。実際、次のような場所にアクセスした場合:

コンポーネントをロードする必要があるためCollection、サイトは単純に次の場所にリダイレクトします。

Homeコンポーネントを再度表示します。

私は何を間違えましたか？

アップデート

ページ構造:

ご覧のとおり、index.jsで構成したように、すべてのリクエストを処理する がありますgatby-node.js。少なくともこの構成を使用して、ローカリゼーション プラグインを削除すると:

URLの前に を付けませんintl.locale。すべて正常に動作しています。しかしredirect: true、プラグイン構成を追加し、リンクにロケールのプレフィックスを付けると、サイトは私をホーム コンポーネントにリダイレクトします。