无法在 i18next 中使用来自 S3 buck 的 JSON

IT技术 reactjs i18next react-intl react-i18next
2021-05-22 07:30:12

这是我的i18n文件的样子 -

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import HttpApi from 'i18next-http-backend';

i18n
  .use(HttpApi)
  .use(initReactI18next)
  .init({
    // resources: resourcesObj,
    initImmediate: false,
    backend: {
      loadPath: 'https://bucketlink.amazonaws.com/locales/{{lng}}/{{ns}}.json',
      crossDomain: true,
      allowMultiLoading: true,
    },
    lng: "en",
    fallbackLng: "en",
    debug: false,
    ns: ["translations"],
    defaultNS: "translations",
    keySeparator: false,
    interpolation: {
      escapeValue: true
    }
  });

export default i18n;

当我更改语言时，我在“网络”选项卡中看到 JSON 正确来自 S3。但是，在我的所有屏幕中都显示了键而不是值。有人可以让我知道为什么我的翻译值没有显示。

注意——如果我使用资源并将我的 json 对象放在其中，它会按预期工作。

1个回答

从您发布的演示中，问题在于您的 json 文件（存储在 s3 中的文件）格式不正确。

您需要按 lang & 命名空间（translations在您的情况下）拆分 json 文件，并且 json 文件必须仅包含与lang&相关的键namespace。

例如，您的文件夹应如下所示：

└── locales
    ├── en
    │   └── translations.json
    └── he
        └── translations.json

并且每个translation.json文件应包含：

{ 
  "Overview": "Overview",
  "TaskList": "Task List"
}

PS，您的翻译文件可以是嵌套对象，那么您需要使用dot notation（类似a.b.c）指定键

其它你可能感兴趣的问题
上一篇添加材料表的新行时编辑自定义列组件 下一篇使用 React Context API 传递 React 函数时重新渲染的问题