Reactjs 如何配置"；react-i18next“；使用盖茨比JS中的翻译文件。总是有丢失键的错误

我需要从盖茨比的项目中得到翻译。 阅读所有文档，可以看到每个人都使用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

---

您不需要给出{t（“brands:NIKE”）}，只需使用{t（“NIKE”）}并同时给出lng属性值以等于i18n文件中翻译的文件名。

如果路径链接正确，我认为路径链接不正确，因此它无法找到密钥。你检查过了吗？如果你是说，path:/locales/{{lng}}/{{ns}}.json就可以了。它就在应该在的地方