reactjs - Gatsby テーマの i18n マークダウンでトグル時に言語が変更されない

Question

gatsby-theme-i18nとgatsby-theme-i18n-react-i18next の両方のプラグインを使用しています

私はgatsby-theme-i18n-react-i18nextうまくいくと思います。ただgatsby-theme-i18n、マークダウンファイルが動かないので、よくわかっていないのかもしれません。

(gatsby-theme-i18n-react-i18next) の言語は変更できますがLayout、(gatsby-theme-i18n) のTemplate言語は変更できませんmarkdowns

en//を切り替えて、th言語を次のように変更します

gatsby-config.js

...
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `products`,
    path: `${__dirname}/src/products/`,
  },
},
{
  resolve: `gatsby-plugin-mdx`,
  options: {
    extensions: [`.md`, `.mdx`],
  }
},
{
  resolve: `gatsby-theme-i18n`,
  options: {
    configPath: require.resolve(`./i18n/config.json`),
    defaultLang: `en`,
  }
},
...

gatsby-node.js

const path = require('path')
exports.createPages = async ({ actions: { createPage }, graphql, reporter }) => {
  const productTemplate = path.resolve('src/templates/Product.js')
  const result = await graphql(`{
    product: allFile( filter: {
      sourceInstanceName: { eq: "products" } 
      ext: { eq: ".md" } 
    } ) {
      nodes {
        childMdx {
          frontmatter {
            slug
          }
        }
      }
    }
  }`)
  if (result.errors) {
    reporter.panicOnBuild(result.errors)
    return
  }
  result.data.product.nodes.forEach(({ childMdx: { frontmatter: { slug } } }) => {
    createPage({
      path: slug,
      component: productTemplate,
      context: {
        slug: slug,
      },
    })
  })

}

レイアウト コンポーネント (切り替えて言語を変更)

import { LocalizedLink } from 'gatsby-theme-i18n'
export default function Layout({ children, slug }){
  return (
    ...
    <LocalizedLink to={slug} language="en">en</LocalizedLink>{'//'}
    <LocalizedLink to={slug} language="th">th</LocalizedLink>
    ...
  )
}

マークダウンを保持するためのテンプレート

import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { LocalizedLink } from 'gatsby-theme-i18n'
import { useTranslation } from 'react-i18next'
import React from 'react'
import Layout from '../components/Layout'
export default function Product({ data: { mdx: { body, frontmatter } }, pageContext }){
  const { t } = useTranslation()
  return (
    <Layout slug={frontmatter.slug}>
      <h3>{frontmatter.title}</h3>
      <MDXRenderer>{body}</MDXRenderer>
      <LocalizedLink to="/">{t('back-to-menu')}</LocalizedLink>
    </Layout>
  )
}
export const dataquery = graphql`
  query {
    mdx {
      body
      frontmatter {
        slug
        title
      }
    }
  }
`

翻訳データファイル（マークダウン）

./i18n (構成)