react-i18next page reload出现missingKeyHandler错误

【问题标题】：react-i18next page reload occurs missingKeyHandler errorreact-i18next page reload出现missingKeyHandler错误
【发布时间】：2023-02-23 04:53:56
【问题描述】：

如果我重新加载页面，它会抛出一个 missingKeyHandler 错误。
这是我的国际化配置。

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

i18n
  .use(initReactI18next)
  .use(HttpApi)
  .init({
    fallbackLng: "en",
    lng: "en",
    ns: ["common"],
    preload: ["en"],
    defaultNS: "common",
    partialBundledLanguages: true,
    interpolation: {
      escapeValue: false,
    },
    backend: {
      loadPath: "./locales/{{ns}}/{{lng}}.json",
      crossDomain: true,
    },
    saveMissing: true,
    missingKeyHandler: (lng, ns, key) => {
      throw new Error(`Missing i18n key ${[lng].flat().join(",")}:${ns}:${key}`);
    }
  });

 export default i18n;

【问题讨论】：

标签： reactjs localization react-i18next

【解决方案1】：

将 allowMultiLoading 添加到后端配置并更改 loadPath 对我有用。

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

i18n
  .use(initReactI18next)
  .use(HttpApi)
  .init({
    fallbackLng: "en",
    lng: "en",
    ns: ["common"],
    preload: ["en"],
    defaultNS: "common",
    partialBundledLanguages: true,
    interpolation: {
      escapeValue: false,
    },
    backend: {
      loadPath: "/locales/{{ns}}/{{lng}}.json",
      allowMultiLoading: false,
      crossDomain: true,
    },
    saveMissing: false,
    missingKeyHandler: (lng, ns, key) => {
      throw new Error(
        `Missing i18n key ${[lng].flat().join(",")}:${ns}:${key}`
      );
    },
  });

export default i18n;

【讨论】：