国际化切换语言后页面内容没更新怎么办？

这个问题听起来像是组件没有正确响应语言变化。使用 i18next 和 react-i18next 时，通常需要确保你的组件能够监听语言的变化并重新渲染。试试这个方法，在你的组件中使用 useTranslation 的返回值中的 tReady 或者 t 函数作为依赖项传给 useEffect，这样当语言变化时可以强制重新渲染。

比如这样：

import { useEffect } from 'react';

import { useTranslation } from 'react-i18next';



const MyComponent = () => {

  const { t, i18n } = useTranslation();



  useEffect(() => {

    // 这里可以放置一些需要在语言变化时执行的逻辑

  }, [i18n.language]); // 监听语言变化



  return (

    <div>

      {t('key')}

    </div>

  );

};

或者你也可以直接用 t 函数本身作为依赖项：

useEffect(() => {

  // 这里可以放置一些需要在语言变化时执行的逻辑

}, [t]); // 监听翻译函数的变化

这样可以确保当语言切换时，组件会重新渲染并显示正确的翻译文本。希望这能解决问题，有时候这些小细节真的挺让人头疼的。

这问题我之前也踩过坑，说白了就是 i18next 没配置 react 的监听。

你的代码本身没问题，问题在于 i18next 初始化时漏了 react 的绑定。看看你的 i18n 初始化配置，大概是这样的：

i18n
.use(initReactI18next)
.init({
// 缺少这个 react 配置
react: {
useSuspense: false,
bindI18nStore: 'added', // 这个很关键
},
// ...
});

核心在于 bindI18nStore: 'added'，加上这个之后，当语言变化时会触发 store 更新，组件才能重新渲染。

另一个可能的原因是你在组件里直接用了 i18n.t() 而不是 useTranslation hook。如果用了 hook 的话应该是这样的：

const { t } = useTranslation();

这样组件才会订阅语言变化。如果你用了 i18n.t() 直接调用，组件可不会自动响应变化。

还有一种情况是如果你用了 Redux 做状态管理，store 更新了但组件没订阅到，这时候可以在 changeLanguage 之后强制触发一次重新渲染：

const changeLang = async (lang) => {
await i18n.changeLanguage(lang);
dispatch(setLocale(lang));
// 强制刷新当前页面
window.location.reload(); // 这算是懒人办法
};

不过更优雅的做法是把 i18n 的实例暴露出去，在组件里用 useEffect 监听：

useEffect(() => {
const handleLanguageChanged = () => {
// 语言变化了
};
i18n.on('languageChanged', handleLanguageChanged);
return () => i18n.off('languageChanged', handleLanguageChanged);
}, []);

你先检查下初始化配置，加上 react 那个绑定参数，大概率就能解决了。