react-i18next显示翻译key而非对应文本值的解决方法

create-react-app 项目接入 i18next 实现多语言时，页面DOM直接输出翻译keymeet_team，未展示对应key的翻译文本。

入口配置 index.js #

import React from "react";
import ReactDOM from "react-dom";
import "./index.scss";
import App from "./components/App/App";
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import HttpApi from "i18next-http-backend";

i18n
  .use(initReactI18next)
  .use(LanguageDetector)
  .use(HttpApi)
  .init({
    debug: true,
    fallbackLng: "ar",
    detection: {
      order: ["htmlTag", "cookie"],
      caches: ["cookie"],
    },
    backend: {
      loadPath: "../public/locales/{{lng}}/translation.json",
    },
    react: { useSuspense: false },
  });

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

翻译文件 #

阿拉伯语 locales/ar/translation.json #

{
    "meet_team": "تعرفوا على فريقنا"
}

土耳其语 locales/tr/translation.json #

{
    "meet_team": "ekipimizle tanışın"
}

业务组件 OurTeam #

import { useTranslation } from 'react-i18next';

const OurTeam = () => {
  const { t } = useTranslation();
  return <h1 className="foo">{t("meet_team")}</h1>;
};

你已经开启了i18next的debug模式，先打开浏览器控制台查看i18next输出的运行日志，按以下优先级排查：

• 首先修正翻译资源加载路径
  当前配置的loadPath: "../public/locales/{{lng}}/translation.json"路径错误。create-react-app 中public目录下的静态资源会被映射到站点根路径，不需要带../public前缀，正确路径配置为/locales/{{lng}}/translation.json。
  路径配置错误会导致HttpApi请求翻译文件返回404，i18next找不到对应key的翻译值时，默认直接返回key字符串。修改后打开浏览器网络面板，确认对应语言的translation.json请求返回200，响应内容为正确的JSON格式翻译内容。
• 调整初始化挂载逻辑，避免资源未加载完成就渲染
  你关闭了Suspense模式，可能出现翻译资源还未异步加载完成，组件已经完成首次渲染的情况。可以等i18n初始化完成、资源加载完毕后再挂载React根节点，同时补充配置避免异常返回：

  i18n
    .use(initReactI18next)
    .use(LanguageDetector)
    .use(HttpApi)
    .init({
      debug: true,
      fallbackLng: "ar",
      returnNull: false,
      returnEmptyString: false,
      detection: {
        order: ["htmlTag", "cookie"],
        caches: ["cookie"],
      },
      backend: {
        loadPath: "/locales/{{lng}}/translation.json",
      },
      react: { useSuspense: false },
    })
    .then(() => {
      ReactDOM.render(
        <React.StrictMode>
          <App />
        </React.StrictMode>,
        document.getElementById("root")
      );
    });
  

• 校验语言检测结果
  你配置的语言检测顺序为先读取html标签的lang属性，再读取cookie。先确认当前html标签的lang属性值是否为已配置翻译的ar或tr，如果检测到未配置翻译的语种，会回退到fallbackLng，若fallback语言的资源加载失败同样会直接返回key。可以在组件中打印i18n.language确认当前生效的语言编码。
• 检查翻译文件格式合法性
  确认两个translation.json为标准JSON格式，不存在多余尾逗号、语法错误，否则JSON解析失败会导致翻译资源加载失效。

90%以上的同类问题都是静态资源路径配置错误导致的，优先检查loadPath配置和网络面板的资源请求状态。

内容的提问来源于stack exchange，提问作者MrXQ