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

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

一、主流 React i18n 方案

1. react-i18next (推荐)

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

bash 复制代码

npm install react-i18next i18next

基本使用：

jsx 复制代码

// 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)

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

bash 复制代码

npm install react-intl

基本使用：

jsx 复制代码

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 文件。

jsx 复制代码

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

<Trans>Welcome</Trans>

二、进阶功能实现

1. 动态加载语言包

js 复制代码

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

2. 语言切换

jsx 复制代码

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. 嵌套翻译与插值

json 复制代码

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

jsx 复制代码

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

三、最佳实践建议

文件组织：

复制代码

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

提取翻译文本：
- 使用工具如 i18next-parser 自动提取
bash 复制代码
```
npm install i18next-parser
```
性能优化：
- 代码分割按需加载语言包
- 使用命名空间减少初始加载体积
SEO 优化：
- 服务端渲染时注入正确语言
- 使用hreflang标签

四、方案对比

特性	react-i18next	react-intl	LinguiJS
学习曲线	中等	较陡	平缓
格式化能力	强	最强	中等
社区生态	最丰富	丰富	一般
动态加载	支持	支持	支持
TypeScript支持	优秀	优秀	良好

五、推荐选择

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

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