如何初始化 i18next

Question

我想通过i18next package 创建一个多语言应用程序

但是 package 不能正常工作
这是i18next文件

import i18n from "i18next";
import Backend from "i18next-xhr-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
const fallbackLng = ["en"];
const availableLanguages = ["de", "en", "fr", "it"];
i18n
  .use(Backend).use(LanguageDetector).use(initReactI18next).init({
    fallbackLng, 
    debug: true,
    whitelist: availableLanguages,
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

这是我为JSON文件创建文件夹的方式

这就是 JSON 文件的编写方式

{
  "select": {
    "1": "choisissez votre langue"
  }
}

这就是我尝试使用它的方式

  const { t } = useTranslation();
  {t("select.1")}

Answer 1

我认为您的 json 缺少翻译密钥的工作如下：

translation: {"select": "My translation", "nextOne": "Another Translation"}

我的完整工作示例（在实际项目中）：

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

import locales from "./locales";
import { getLang } from "../helpers/language-helper";

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources: locales,
    lng: getLang(),
    fallbackLng: getLang(),
    interpolation: {
      escapeValue: false,
    },
  });

// 语言环境文件：

import en from "./en";
import ko from "./ko";
import ar from "./ar";

export default {
  en,
  ko,
  ar,
};

// 翻译文件（例如 en）：

export default {
  translation: {
    language: "EN",
    kaitTitle: "Kait Solution",
commonValiation: {
      htmlTagMessasge: "Html tags not allowed",
      tryAgain: 'Something went wrong. Please try again',
      requiredField: "This field is Required",
    },
}
}

// 利用

t('commonValiation.htmlTagMessasge')