Question

我需要从Gatsbyjs项目获得翻译。阅读所有文档，发现每个人都使用react-i18next，但是有许多不同的配置方式，特别是如果您是通过GatsbyJS运行它的话。

我已经尝试了所有方法，但始终会遇到缺少按键错误的情况。我在做什么错了？

首先，我创建了一个名为i18n的组件：

    import i18n from 'i18next';
    import { useEffect } from "react"
    import { initReactI18next } from 'react-i18next';
    import Backend from 'i18next-xhr-backend'; 

     i18n.use(Backend)
          .use(initReactI18next)
          .init({
            lng: 'en',
            fallbackLng: 'en',
            debug: true,
            resources: {
              "backend": { 
                loadPath: '/locales/{{lng}}/{{ns}}.json'
              }
            },
            interpolation: {
              escapeValue: false, // not needed for react as it escapes by default
            },
            ns: ["brands"],
            defaultNS: 'brands',
            keySeparator:false,
            react: {
              wait: true,
            }
          })
  export default i18n;

然后，我在我的页面之一中重用此组件

import i18n from '../../components/i18n'
    ...
const { t } = useTranslation();
    ...
{t("brands:NIKE")}
...

这是一个翻译文件：

/src/locales/en/brands.json

brands.json文件的内容为：

{ NIKE:"Nike" }

尽管如此，我还是遇到了以下错误

i18next::translator: missingKey brands:NIKE

Answer 1

您无需提供{t（“ brands：NIKE”）}，只需使用{t（“ NIKE”）}，并提供lng属性值即可等于i18n文件中的翻译文件名。

如何在GatsbyJS中使用翻译文件配置“ react-i18next”。总是缺少键错误

1 个答案: