1

私は使用してGatsbyおり、多言語を使用して 1 つのサイトを作成したいと考えています。これまでのところ、これpages/index.jsを含むものを定義しました:

import React from "react"
import Layout from "../components/layout/layout"

import BGTState from "../context/bgt/bgtState"
import { Router } from "@reach/router"
import Home from "../components/pages/home"
import Collection from "../components/pages/collection"
import NotFound from "../components/pages/404"

const IndexPage = () => {
  return (
    <BGTState>
      <Layout>
        <Router>
          <Home path="/" />
          <Collection path="collection/:id" />
          <NotFound default />
        </Router>
      </Layout>
    </BGTState>
  )
}

export default IndexPage

そして私は次のように変更gatsby-node.jsしました:

// Implement the Gatsby API onCreatePage. This is
// called after every page is created.
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

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

各リクエストは に転送されindex.jsますが、問題があります。gatsby-plugin-intl次のような動的プレフィックスを URL に追加するプラグインを使用しています。http://localhost:3001/en/

にアクセスすると、URL に一致するルートがないためhttp://localhost:3001/en/、コンポーネントが表示されます。NotFoundURL にプレフィックスを付けて、すべてを正しいコンポーネントに再ルーティングする方法はありますか?

4

1 に答える 1