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

这问题我之前也踩过坑，说白了就是 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 那个绑定参数，大概率就能解决了。