i18next如何加载翻译？

Question

我试图在我的应用程序中添加翻译，但我无法找到使i18next工作的方法。

这里是i18n.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import * as en from './i18n/en.json';
import * as jp from './i18n/jp.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en,
      jp
    },
    lng: "en",
    fallbackLng: "en",
    keySeparator: ".",
    debug: true,
    interpolation: {
      escapeValue: false
    }
});

export default i18n;

然后，我将其导入到索引文件的第二行。

这些日志是：

i18next: languageChanged en i18next.js:27 i18next:初始化的{debug:真，initImmediate:真，ns:数组(1)，defaultNS:数组(1)，fallbackLng:数组(1)，…} projectSelector.tsx:16 i18n{观察者：{…}，选项：{…}，服务：{…}，记录器:记录器，模块：{…}，准…} i18next.js:27 i18next::translator: missingKey en translator PROJECT.CREATE_PROJECT.DEFAULT_PJ_NAME

THe翻译如下所示

{
  "PROJECT": {
    "CREATE_PROJECT" : {
      "DEFAULT_PJ_NAME" : "Default"
    }
  }
}

Answer 1

您已经走上了一条很好的道路，您只需要添加翻译来标记i18next的翻译

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

import en_translate from './i18n/en.json';

import jp_transltate from './i18n/jp.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en:{
            translation: en_translate              
        },
      jp:{
            translation: jp_transltate              
        }
    },
    lng: "en",
    fallbackLng: "en",
    keySeparator: ".",
    debug: true,
    interpolation: {
      escapeValue: false
    }
});

export default i18n;

将翻译添加到功能组件wiht Hook中

import React from 'react';

// the hook
import { useTranslation } from 'react-i18next';

function MyComponent () {
  const { t, i18n } = useTranslation();
  return <h1>{t('PROJECT.CREATE_PROJECT.DEFAULT_PJ_NAME')}</h1>
}

您可以在i18next快速启动指南中查看不同的实现，很好地解释了