Vite+React+TypeScript项目中i18next的t('test')无法翻译求助

核心问题分析 #

你的代码存在两个关键问题导致翻译失效：

• i18n.ts中resources的结构不符合i18next规范，每个语言的资源必须嵌套在translation命名空间下
• 未导出i18n实例且未在App中导入初始化文件，导致React组件无法获取i18next上下文

修复后的i18n.ts #

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import enJSON from './locales/en.json';
import cnJSON from './locales/cn.json';

// 导出i18n实例，确保初始化逻辑被执行
export default i18n.use(initReactI18next).init({
    resources: {
        // 每个语言资源必须包裹在translation命名空间下
        en: { translation: enJSON },
        cn: { translation: cnJSON },
    }, 
    lng: "en",
    defaultNS: "translation", // 设置默认命名空间，简化t函数调用
    debug: false, // 调试时可设为true，查看日志排查问题
});

多语言文件示例 #

locales/en.json：

{
  "test": "Hello World"
}

locales/cn.json：

{
  "test": "你好，世界"
}

优化后的App.tsx #

import { useTranslation } from 'react-i18next';
// 必须导入i18n初始化文件，保证上下文生效
import './i18n';

function App() {
  const { t, i18n } = useTranslation();

  const handleChangeLanguage = () => {
    const newLanguage = i18n.language === "en" ? "cn" : "en";
    i18n.changeLanguage(newLanguage);
  }
  
  return (
    <div>
        <h1>{t('test')}</h1>
        <h3>Current Language: {i18n.language}</h3>
        <button 
            type="button" 
            onClick={handleChangeLanguage}
        >
            Change Language
        </button>
    </div>
  )
}

export default App

关键修复要点 #

1. 严格遵循i18next的资源结构要求，所有翻译文本必须放在translation命名空间下
2. 确保在App组件中导入i18n.ts，触发初始化逻辑
3. 移除冗余的currentLanguage状态，直接使用i18n实例的language属性，避免状态不同步

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