在Outlook插件中基于React Router DOM+i18n实现多语言翻译的问题

下面从核心配置、组件使用、状态保持三个关键环节逐一排查修复：

1. 确认i18n核心配置文件正确性 #

首先检查你的i18n.js配置，确保初始化逻辑完整、资源加载正确：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslation from './locales/en.json';
import zhTranslation from './locales/zh.json';

// 翻译资源映射
const resources = {
  en: {
    translation: enTranslation
  },
  zh: {
    translation: zhTranslation
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: localStorage.getItem('language') || 'en', // 优先读取本地存储，默认英文
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false // React自带XSS防护，无需额外处理
    }
  });

export default i18n;

对应的翻译文件示例（locales/en.json）：

{
  "home": "Home Page",
  "login": "Login",
  "welcome": "Welcome to Outlook Add-in"
}

2. 组件内正确调用翻译方法 #

在HomePage或Login组件中，必须通过useTranslation钩子或withTranslation高阶组件获取翻译函数，示例：

// HomePage.jsx
import React from 'react';
import { useTranslation } from 'react-i18next';

const HomePage = () => {
  const { t, i18n } = useTranslation();

  // 语言切换逻辑，同时持久化设置
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
    localStorage.setItem('language', lng);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('zh')}>中文</button>
    </div>
  );
};

export default HomePage;

3. 确保路由组件在I18nextProvider范围内 #

你的App组件结构是正确的，I18nextProvider已经包裹了整个路由体系，所有路由组件都能获取到翻译上下文。后续添加嵌套路由时，只需保持嵌套组件在该Provider范围内即可。

4. Outlook插件特殊适配 #

由于Outlook插件运行在Office环境中，若localStorage存在使用限制，可改用Office API存储语言偏好：

// 切换语言时存储到Office上下文
const changeLanguage = async (lng) => {
  i18n.changeLanguage(lng);
  await Office.context.settings.set('language', lng);
  await Office.context.settings.saveAsync();
};

// i18n初始化时读取Office存储的语言设置
const initLanguage = async () => {
  const savedLng = await Office.context.settings.get('language');
  return savedLng || 'en';
};

// 修改i18n初始化逻辑
i18n.init({
  // ...其他配置
  lng: await initLanguage(),
});

常见排查点 #

• 检查翻译文件的键名是否与组件中t('key')的调用完全一致（大小写敏感）
• 确认i18n配置文件已正确导出，且在App组件中正确导入
• 查看浏览器控制台是否有i18n相关报错（比如资源加载失败、初始化错误）

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