React项目中i18next翻译失效问题求助

问题描述 #

点击以下按钮本应切换语言：

<a href="/" className={`bn5 ${i18next.language === LOCALES.UK ? 'disabled-link' : ''}`} onClick={handleUkrlanguage}>Ukrainian</a>
<a href="/" className={`bn5 ${i18next.language === LOCALES.EN ? 'disabled-link' : ''}`} onClick={handleEngLanguage}>English</a>

通过Redux切换按钮状态的逻辑已验证正确（console.log输出可确认），但i18next切换语言后始终无法加载对应翻译内容。

组件代码 #

import './header.css';
import gsap from 'gsap';
import React, { useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ukrLanguage, engLanguage } from '../../redux/actions';
import i18next from 'i18next';
import { LOCALES } from '../i18n/constants';
import { Trans, useTranslation } from 'react-i18next';
import '../i18n/index';

const Header = () => {
  const heroRef = useRef(null);
  const { t } = useTranslation();
  const selectedLanguage = useSelector(state => state.language.selectedLanguage);

  useEffect(() => {
    const tl = gsap.timeline();
    tl.fromTo(heroRef.current, { x: -100, opacity: 0 }, { x: 0, opacity: 1, duration: 2 }, 1);
  }, []);


  useEffect(() => {
    console.log('Changing language to:', selectedLanguage);
    i18next.changeLanguage(selectedLanguage).then(() => {
      console.log('Language changed to:', i18next.language);
      console.log('Current translations:', i18next.getDataByLanguage(i18next.language));
      console.log('t("Welcome to React"):', t('Welcome to React'));
    }).catch(err => {
      console.error('Error changing language:', err);
    });
  }, [selectedLanguage]);

  const dispatch = useDispatch();
  const handleUkrlanguage = (event) => {
    event.preventDefault();
    console.log('Switching to Ukrainian');
    dispatch(ukrLanguage());
  }

  const handleEngLanguage = (event) => {
    event.preventDefault();
    console.log('Switching to English');
    dispatch(engLanguage());
  }
  console.log('Rendering Header with language:', i18next.language);
  console.log('Current translations in Header:', i18next.getDataByLanguage(i18next.language));
  console.log('t("Welcome to React") in render:', t('Welcome to React'));

  return (
    <header className='header'>
      <div className="container header__container">
        <div className="header__wrapper">
          <a href="#" className='header__hero' ref={heroRef}>
            <span className='header__surname'>My </span>
            <span className='first__name'>CV</span>
          </a>
          <div className="lng__btns-wrapper">
            <h3>{selectedLanguage}</h3>
            <a href="/" className={`bn5 ${i18next.language === LOCALES.UK ? 'disabled-link' : ''}`} onClick={handleUkrlanguage}>Ukrainian</a>
            <a href="/" className={`bn5 ${i18next.language === LOCALES.EN ? 'disabled-link' : ''}`} onClick={handleEngLanguage}>English</a>
            </div>
          <h3>{t('Welcome to React')}</h3>
          <h3><Trans>Welcome to React</Trans></h3>
        </div>
      </div>
    </header>
  );
}

export default Header;

控制台输出 #

Initializing i18next with resources: {en: {…}, uk: {…}}
index.js:31 i18next initialized with language: EN
index.js:32 Available resources: {en: {…}, uk: {…}}
Rendering App with language: EN
Header.jsx:46 Rendering Header with language: EN
**Header.jsx:47 Current translations in Header: undefined**
Header.jsx:48 t("Welcome to React") in render: Ласкаво просимо до React
Changing language to: UK
index.js:37 Language changed to: UK
**index.js:38 Current translations: undefined**
Header.jsx:26 Language changed to: UK
**Header.jsx:27 Current translations: undefined**
Header.jsx:28 t("Welcome to React"): Ласкаво просимо до React
Header.jsx:46 Rendering Header with language: UK
**Header.jsx:47 Current translations in Header: undefined**
Header.jsx:48 t("Welcome to React") in render: Ласкаво просимо до React

排查与解决方案 #

从控制台输出能看到几个关键异常点：

1. i18next.getDataByLanguage() 返回undefined，说明i18next无法正确读取对应语言的资源文件
2. 切换语言后，翻译内容始终显示乌克兰语，未随语言切换更新

可能的原因及修复步骤： #

1. 检查i18n初始化配置

• 确认../i18n/index.js中资源文件的加载路径、命名空间是否正确。必须将翻译资源挂载到对应语言的translation默认命名空间下：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslation from './locales/en/translation.json';
import ukTranslation from './locales/uk/translation.json';

const resources = {
  en: {
    translation: enTranslation
  },
  uk: {
    translation: ukTranslation
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'EN',
    fallbackLng: 'EN',
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

2. 统一语言代码格式

• 确认LOCALES常量中的值与i18n初始化时的语言代码完全匹配。若i18n用小写uk/en，Redux存大写UK/EN，会导致资源匹配失败。建议统一格式：

// ../i18n/constants.js
export const LOCALES = {
  UK: 'uk',
  EN: 'en'
};

3. 确保组件感知语言变化

• 当前组件中useTranslation返回的t函数未在语言切换时触发重渲染。可添加i18n实例或t函数作为useEffect依赖，确保语言变化时更新翻译：

const { t, i18n } = useTranslation();

useEffect(() => {
  i18next.changeLanguage(selectedLanguage);
}, [selectedLanguage, i18n]);

4. 验证资源文件内容

• 确认en/translation.json和uk/translation.json中存在对应翻译条目：
  • en/translation.json: "Welcome to React": "Welcome to React"
  • uk/translation.json: "Welcome to React": "Ласкаво просимо до React"

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