React 多语言(i18n)方案全面指南

在 React 应用中实现多语言国际化(i18n)有多种方案，以下是主流实现方式和详细对比：

一、主流 React i18n 方案

1. react-i18next (推荐)

基于 i18next 的 React 集成方案，功能最全面。

npm install react-i18next i18next

基本使用：

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: { welcome: "Welcome" }},
    zh: { translation: { welcome: "欢迎" }}
  },
  lng: 'en',
  fallbackLng: 'en'
});

// 组件中使用
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();
  return <h1>{t('welcome')}</h1>;
}

优势：

• 支持命名空间(ns)
• 完整的插值、格式化、复数处理
• 支持服务端渲染(SSR)
• 丰富的插件系统(本地存储、语言检测等)

2. react-intl (FormatJS)

适合需要复杂格式化的场景(日期、货币等)。

npm install react-intl

基本使用：

import { IntlProvider, FormattedMessage } from 'react-intl';

const messages = {
  en: { welcome: "Welcome" },
  zh: { welcome: "欢迎" }
};

<IntlProvider locale="en" messages={messages.en}>
  <FormattedMessage id="welcome" />
</IntlProvider>

3. LinguiJS

简洁的语法，支持 JSX 和 PO 文件。

import { Trans } from '@lingui/macro';

<Trans>Welcome</Trans>

二、进阶功能实现

1. 动态加载语言包

// 按需加载语言文件
import('locales/zh.json').then(messages => {
  i18n.addResourceBundle('zh', 'translation', messages);
});

2. 语言切换

function LanguageSwitcher() {
  const { i18n } = useTranslation();
  
  return (
    <select onChange={(e) => i18n.changeLanguage(e.target.value)}>
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>
  );
}

3. 嵌套翻译与插值

{
  "user": {
    "welcome": "Hello, {{name}}!"
  }
}

t('user.welcome', { name: 'John' });

三、最佳实践建议

1. 文件组织：

   /src
     /locales
       /en
         common.json
         home.json
       /zh
         common.json
         home.json
   

2. 提取翻译文本：

   • 使用工具如 i18next-parser 自动提取

   npm install i18next-parser
   

3. 性能优化：

   • 代码分割按需加载语言包
   • 使用命名空间减少初始加载体积

4. SEO 优化：

   • 服务端渲染时注入正确语言
   • 使用hreflang标签

四、方案对比

五、推荐选择

• 企业级应用：react-i18next + i18next（功能最全）
• 内容型网站：react-intl（格式化需求强）
• 快速开发：LinguiJS（简单项目）

对于大多数React项目，react-i18next是目前最平衡的选择，既有强大的功能，又有丰富的扩展生态。