使用react-i18next与react-router-dom时路由刷新翻译失效求助

看起来你遇到的问题很典型——子路由刷新或直接访问时，路由内组件的翻译失效，语言切换也不响应，但根组件（侧边栏、头部）正常。这大概率是翻译文件加载路径错误和组件未正确订阅i18n状态变化导致的，我来帮你一步步解决：

1. 修复翻译文件的加载路径 #

你使用了i18next-xhr-backend加载翻译文件，默认情况下它会从当前路由路径发起请求。比如在/suppliers路由下，它会尝试请求/suppliers/locales/nl/translation.json（假设你的默认命名空间是translation），但你的翻译文件实际放在根路径的/locales目录下，导致请求404，翻译无法加载。

修改你的i18n配置，给Backend指定绝对路径的loadPath：

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import { initReactI18next } from 'react-i18next';

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    fallbackLng: 'nl',
    debug: true,
    interpolation: { escapeValue: false },
    backend: {
      // 关键：用绝对路径指定翻译文件位置，确保所有路由下都从根路径加载
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    }
  });

export default i18n;

这样不管当前在哪个子路由，都会请求http://localhost:3000/locales/[语言]/[命名空间].json，避免路径错误。

2. 确保路由组件正确使用翻译钩子/高阶组件 #

路由内组件无法响应语言切换，通常是因为没有正确订阅i18n的语言变化状态。请检查你的SampleComponent是否正确使用了useTranslation钩子（函数组件）或withTranslation高阶组件（类组件）：

函数组件示例： #

import { useTranslation } from 'react-i18next';

const SampleComponent = () => {
  // 这里会自动订阅i18n的语言变化，语言切换时组件会重新渲染
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t('sample.title')}</h1>
      <p>{t('sample.description')}</p>
    </div>
  );
};

export default SampleComponent;

类组件示例： #

import React from 'react';
import { withTranslation } from 'react-i18next';

class SampleComponent extends React.Component {
  render() {
    const { t } = this.props;
    return (
      <div>
        <h1>{t('sample.title')}</h1>
        <p>{t('sample.description')}</p>
      </div>
    );
  }
}

// withTranslation会自动为组件添加语言变化订阅
export default withTranslation()(SampleComponent);

不要直接调用i18n.t()，因为这样组件不会感知到语言变化，也就不会重新渲染更新翻译。

3. 验证命名空间配置（可选） #

如果你的翻译文件使用了自定义命名空间（比如不是默认的translation），需要在useTranslation中指定命名空间，或者在i18n初始化时设置defaultNS：

// 初始化时设置默认命名空间
i18n.init({
  // ...其他配置
  defaultNS: 'sample',
});

// 或者在组件中指定
const { t } = useTranslation('sample');

4. 检查Suspense的使用（补充） #

你已经用Suspense包裹了整个BrowserRouter，这没问题，但如果你的路由组件是通过React.lazy懒加载的，需要确保每个懒加载组件也被Suspense包裹（不过你的问题里看起来不是懒加载导致的，但可以排查一下）。

完成以上步骤后，刷新子路由或直接访问子路由时，翻译文件应该能正确加载，语言切换也会同步更新路由内组件的内容了。

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