reactjs - 翻译 i18next on React can't find key

Question

我是第一次使用 i18n，实际上它加载时没有错误，但现在我在尝试更改要显示的语言时遇到问题:

i18next: languageChanged es
i18next::translator: missingKey es translations title.Library Library

问题是我不确定为什么我四处搜索，它说这是因为文件加载不正确(带有翻译的 JSON)但是自动完成工作让我认为它正在加载到我的 i18n .js 文件:

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import XHR from "i18next-xhr-backend";

import translations_en from './locales/en/translation.en.json';
import translations_es from './locales/es/translation.es.json';

i18n

.use(XHR)
.use(LanguageDetector)
.init({
  // we init with resources
  resources: {
    en: {
      translations: translations_en
    },
    es: {
      translations: translations_es
    }
  },
  fallbackLng: "en",
  debug: true,

  // have a common namespace used around the full app
  ns: ["translations"],
  defaultNS: "translations",

  keySeparator: false, // we use content as keys

  interpolation: {
    escapeValue: false, // not needed for react!!
    formatSeparator: ","
  },

  react: {
    wait: true,
    useSuspense: false
  }
});

export default i18n;

仍然，我无法弄清楚为什么会这样，在我的 Library.js 上我正在做:

...
<a class="text-center"><Trans i18nKey="title.Library">Library</Trans></a>
...

这是 JSON 文件:

{
    "title": {
        "Library": "Biblioteca"
    }
      
}

我还应该添加 taht 我的文件结构如下所示:

src
|
|-- assets/
|-- locales/
|    |
|    |-- en/
|    |    |-- translation.en.json
|    |     
|    |-- es/
|    |--  |-- translation.es.json

Answer 1

根据您的 JSON 文件，您正在使用 keybased catalog 而不是自然键。删除这一行

keySeparator: false, // we use content as keys