i18next组件外翻译失效求助（create-react-app环境）

这个问题其实很常见，核心原因是你的导航模块在加载时就立即执行了i18n.t()，但此时i18next还没完成初始化和翻译文件的加载。

i18next的初始化过程是异步的（尤其是你用了Backend加载远程翻译文件），当你的导航文件被import时，i18n.init()还在后台加载翻译资源，这时候调用i18n.t()自然只能拿到默认值'NOT FOUND'。而组件内翻译正常，是因为react-i18next的useTranslation或withTranslation会自动等待i18n初始化完成，并且在翻译资源就绪后触发组件重新渲染。

下面给你两种简单可行的解决方案：

方案1：把导航定义改为函数，延迟执行翻译 #

将你的导航数组改成一个函数，这样只有当组件准备好使用导航时才会调用i18n.t()，此时i18n已经完成初始化：

修改导航文件： #

import i18n from '../../i18n';

// 改为函数形式，需要时再调用
const getNavigation = () => [
 {
  id: 'dashboard',
  title: i18n.t('analytics.title', 'NOT FOUND'),
  type: 'group',
  icon: 'apps',
 }
];

export default getNavigation;

在使用导航的组件中调用： #

import getNavigation from './path/to/your/navigation/file';
import { useTranslation } from 'react-i18next';

const NavigationComponent = () => {
  // useTranslation会确保i18n已就绪
  const { t } = useTranslation();
  const navigation = getNavigation();

  return (
    {/* 这里渲染你的导航UI */}
    <div>
      {navigation.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
};

export default NavigationComponent;

方案2：分离导航结构与翻译，在组件内完成翻译 #

这种方法更符合react-i18next的使用习惯，把导航的配置和翻译逻辑分开：

修改导航文件（仅存结构）： #

// 只定义导航的基础结构，title替换为翻译key
const navigationConfig = [
 {
  id: 'dashboard',
  titleKey: 'analytics.title',
  type: 'group',
  icon: 'apps',
 }
];

export default navigationConfig;

在组件内结合useTranslation完成翻译： #

import navigationConfig from './path/to/your/navigation/file';
import { useTranslation } from 'react-i18next';

const NavigationComponent = () => {
  const { t } = useTranslation();
  // 遍历配置，动态生成带翻译的导航项
  const navigation = navigationConfig.map(item => ({
    ...item,
    title: t(item.titleKey, 'NOT FOUND')
  }));

  return (
    {/* 渲染导航UI */}
    <div>
      {navigation.map(item => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
};

export default NavigationComponent;

额外说明 #

你在i18n.js里设置的react: { wait: true }是正确的，这个配置会让React组件等待i18n初始化完成再渲染，但它只对使用react-i18next提供的hooks/HOC的组件生效，组件外的代码不受这个配置影响，所以还是需要用上面的方法延迟翻译逻辑的执行。

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