带有gatsby-plugin-i18next的设置语言切换器

Question

我正在尝试按照本教程使用gatsby-plugin-i18next设置i18n： https://phrase.com/blog/posts/i18n-with-gatsby/

我已经在gatsby-config中设置了插件

 {
      resolve: `gatsby-plugin-i18next`,
      options: {
        availableLngs: ["en", "vi"],
        fallbackLng: "en",
        saveMissing: true,
        debug: true,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/locale`,
        name: `locale`,
      },
    },

和index.js

import { withTranslation } from 'react-i18next';
import { withI18next } from 'gatsby-plugin-i18next';
import { graphql } from 'gatsby'

class Home extends Component {
  render() {
    const { t } = this.props
    return (
      <Layout>
        <Background>
          <MainContainer className="main-container">
            <H1Tag>nanoHome | Home Page</H1Tag>
            <SectionAbout>
              <Paragraph>
                {t('nanoHomeDescription')}
              </Paragraph>
            </SectionAbout>
          </MainContainer>
        </Background>
      </Layout>
    )
  }
}

export default withI18next()(withTranslation()(Home))

export const query = graphql`
  query($lng: String!) {
    locales: allLocale(filter: { lng: { eq: $lng }, ns: { eq: "messages" } }) {
      ...TranslationFragment
    }
  }
`;

以及$ {__ dirname} / locale中的JSON文件中：

{   “ nanoHomeDescription”：“ Gatsby I18nextσταΕλληνικά”， }

但是，上面index.js中的t帮助器方法{t（'nanoHomeDescription'）}仅在JSON中呈现键。 请帮助我。