私が使用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
、プラグイン構成を追加し、リンクにロケールのプレフィックスを付けると、サイトは私をホーム コンポーネントにリダイレクトします。