使用useTranslation切换语言后组件未自动重渲染问题求助

我正在用 react-i18next 和 i18n 实现 React 本地化功能，i18next 的 languageChanged 事件已经触发，但调用 t() 函数的组件不会自动重渲染，只能手动刷新页面更新UI。

相关代码 #

i18n.js #

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
i18n
  // 检测用户语言
  .use(LanguageDetector)
  // 将i18n实例传递给react-i18next
  .use(initReactI18next)
  // 初始化i18next
  .init({
    debug: true,
    fallbackLng: "en",
    interpolation: {
      escapeValue: false,
    },
    resources: {
      en: {
        translation: {
          greeting: "Hello",
        },
      },
      ar: {
        translation: {
          greeting: "مرحبا",
        },
      },
    },
  });

export default i18n;

main.jsx #

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./i18n";
import "./index.css";

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

App.jsx #

import { Suspense } from "react";
import LanguageSelector from "@/components/language/LanguageSelector";
import Home from "@/pages/root/Home";

function App() {
  return (
    <Suspense fallback={<p>加载中</p>}>
      <LanguageSelector />
      <Home />
    </Suspense>
  );
}

export default App;

LanguageSelector.jsx（语言切换组件） #

import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";

const languages = [
  { code: "en", nativeName: "English" },
  { code: "ar", nativeName: "العربية" },
];

const LanguageSelector = () => {
  const { i18n } = useTranslation();

  useEffect(() => {
    document.body.dir = i18n.dir();
  }, [i18n, i18n.language]);

  return (
    <div className="flex-center mt-10 gap-5">
      {languages.map((lng) => (
        <button
          className={`${
            lng.code === i18n.resolvedLanguage ? "bg-green-100" : ""
          } border rounded-xl p-3`}
          key={lng.code}
          onClick={() => i18n.changeLanguage(lng.code)}
        >
          {lng.nativeName}
        </button>
      ))}
    </div>
  );
};

export default LanguageSelector;

Home.jsx（调用t()但不自动重渲染的组件） #

import React from "react";
import { useTranslation } from "react-i18next";

const Home = () => {
  const { t } = useTranslation();
  return (
    <h1 className="flex-center h-full-screen text-4xl">{t("greeting")}</h1>
  );
};

export default Home;

已尝试的解决方案 #

我曾在 i18n.js 的 init 配置中添加以下选项，但问题未解决：

react: {
      bindI18n: "loaded languageChanged",
      bindI18nStore: "added",
      useSuspense: true,
    },

请问我遗漏了什么？

解决方法 #

1. 核对依赖版本兼容性 #

确保 react-i18next 和 i18next 版本匹配，版本差异过大可能导致事件绑定失效。建议安装兼容版本组合：

npm install i18next@^23.0.0 react-i18next@^13.0.0

2. 修正 useTranslation 使用方式 #

在 Home 组件中显式指定默认命名空间，确保组件正确订阅语言变化：

const { t } = useTranslation("translation");

3. 调整 i18n 初始化的 react 配置 #

修改绑定事件的顺序和范围：

react: {
  bindI18n: "languageChanged loaded",
  bindI18nStore: "added removed",
  useSuspense: true,
}

4. 排查 StrictMode 影响 #

暂时移除 <React.StrictMode> 包裹，测试是否能正常触发重渲染。若问题解决，可保留 StrictMode 并排查其他冲突点。

5. 调整 LanguageDetector 缓存设置 #

禁用 LanguageDetector 的缓存，避免手动切换的语言被缓存覆盖：

.init({
  // ...其他配置
  detection: {
    caches: [],
  },
})

6. 强制组件订阅语言变化 #

在 Home 组件中监听 i18n.language 变化，强制触发重渲染：

import React from "react";
import { useTranslation } from "react-i18next";

const Home = () => {
  const { t, i18n } = useTranslation();
  React.useEffect(() => {}, [i18n.language]);
  
  return (
    <h1 className="flex-center h-full-screen text-4xl">{t("greeting")}</h1>
  );
};

export default Home;

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