## 前言

随着互联网应用的全球化发展，多语言支持（国际化，Internationalization，简称 i18n）成为现代前端开发中不可或缺的一部分。React 作为主流的前端框架，如何优雅地实现多语言切换？本文将以 **i18next** 这个流行的国际化库为例，详细讲解如何在 React 项目中实现多语言支持。

---

## 什么是 i18next？

i18next 是一个功能强大且灵活的国际化框架，支持多种前端和后端环境。它提供了语言资源管理、语言切换、占位符替换、格式化等丰富功能。配合 React 的绑定库 `react-i18next`，可以非常方便地在 React 应用中实现多语言。

---

## 准备工作

- 确保你有一个基于 React 的项目（使用 Create React App、Vite 或其他脚手架均可）
- 熟悉 React 基础知识
- 对 JavaScript 模块有基本了解

---

## 安装依赖

在项目根目录打开终端，执行以下命令安装 i18next 和 react-i18next：

```bash
npm install i18next react-i18next
```

或使用 yarn：

```bash
yarn add i18next react-i18next
```

---

## 创建语言资源文件

语言资源文件是存放不同语言文本的 JSON 文件，通常按语言代码分类。

项目结构示例：

```
src/
  locales/
    en/
      translation.json
    zh/
      translation.json
```

- `en/translation.json`（英文）

```json
{
  "welcome": "Welcome to React",
  "description": "This is a simple internationalization example."
}
```

- `zh/translation.json`（中文）

```json
{
  "welcome": "欢迎使用 React",
  "description": "这是一个简单的国际化示例。"
}
```

---

## 初始化 i18next

在 `src` 目录下创建 `i18n.js` 文件，负责初始化 i18next。

```javascript
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// 导入语言资源
import enTranslation from './locales/en/translation.json';
import zhTranslation from './locales/zh/translation.json';

i18n
  .use(initReactI18next) // 让 i18next 绑定 React
  .init({
    resources: {
      en: {
        translation: enTranslation,
      },
      zh: {
        translation: zhTranslation,
      },
    },
    lng: 'zh', // 默认语言
    fallbackLng: 'en', // 如果当前语言资源不存在，回退到英文
    interpolation: {
      escapeValue: false, // React 已经安全处理了 XSS
    },
  });

export default i18n;
```

---

## 在 React 中使用 i18next

### 1. 在入口文件中引入 i18n

一般在 `src/index.js` 或 `src/main.jsx` 中引入：

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './i18n'; // 引入 i18n 配置

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
```

### 2. 使用 `useTranslation` 钩子

在任何组件中，可以通过 `useTranslation` 获取翻译函数 `t`。

示例 `App.js`：

```javascript
import React from 'react';
import { useTranslation } from 'react-i18next';

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

  // 切换语言函数
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div style={{ padding: 20 }}>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>

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

export default App;
```

---

## 进阶功能

### 1. 动态插值

i18next 支持动态变量替换，比如：

```json
{
  "greeting": "Hello, {{name}}!"
}
```

React 组件中：

```javascript
<p>{t('greeting', { name: 'Alice' })}</p>
```

输出：

```
Hello, Alice!
```

### 2. 语言检测和持久化

可以集成 `i18next-browser-languagedetector` 插件，自动检测用户浏览器语言，提升体验。

安装：

```bash
npm install i18next-browser-languagedetector
```

修改 `i18n.js`：

```javascript
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    // ...其他配置
  });
```

这样，i18next 会自动检测浏览器语言并使用。

### 3. 多命名空间支持

大型项目可能会将翻译拆分为多个命名空间，方便管理。

资源示例：

```
locales/en/common.json
locales/en/home.json
```

初始化时配置多个命名空间：

```javascript
i18n.init({
  ns: ['common', 'home'],
  defaultNS: 'common',
  resources: {
    en: {
      common: { /* ... */ },
      home: { /* ... */ },
    },
    zh: {
      common: { /* ... */ },
      home: { /* ... */ },
    },
  },
});
```

使用时指定命名空间：

```javascript
const { t } = useTranslation('home');
```

---

## 总结

通过以上步骤，你已经掌握了如何在 React 项目中使用 i18next 实现多语言国际化：

- 安装并配置 i18next 和 react-i18next
- 准备语言资源文件
- 初始化 i18next，绑定 React
- 使用 `useTranslation` 钩子实现文本翻译和语言切换
- 掌握动态插值、语言检测、多命名空间等进阶功能


随着互联网应用的全球化发展，多语言支持（国际化，Internationalization，简称i18n）成为现代前端开发中不可或缺的一部分。React作为主流的前端框架，如何优雅地实现多语言切换？本文将以i18next这个流行的国际化库为例，详细讲解如何在React项目中实现多语言支持。什么是i18next？i18next是一个功能强大且灵活的国际化框架，支持多种前端和后端环境。它提供了语言资源管

React 支持多语言国际化 -- i18next

## React-i18next

> 是一款强大的国际化框架for react /react native,基于 `i18next`，其作用就是项目可以实现多语言。

#### 下面我将介绍一下react-i18n的使用

#### 安装

```
# npm
$ npm install react-i18next i18next --save
```

#### 初始化

**配置选项**

* resource: 资源初始化
* lng： 使用的语言
* fallbackLng: 兜底语言
* debug: 将日志打印到控制台
* interpolation: 插值。允许将动态值即成到翻译中 escapeValue --->是否转义传递的值

i18n.ts

```ts
import i18n from "i18next";
import {initReactI18next } from "react-i18next";
import ja from "./ja.json";
import en from "./en.json";
import zh from "./zh.json";

export const resources = {
    "ja": {
        translation: ja
    },
    "en": {
        translation: en
    },
    "zh": {
        translation: zh
    }
}

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: "en", // if you're using a language detector, do not define the lng option
    fallbackLng: "en",
    debug: true,
    interpolation: {
      escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
    }
  });
```

#### 加载

> 需要在项目入口加载,目的就是初始化，加载资源文件，后续在组件中可以正常翻译。不进行加载的话，下面所说的组件的使用带来的效果就是界面显示的都是key 值而不是对应的value值。这里我以小程序举例

app.tsx

```tsx
import './i18n/i18n'
```

#### 组件中使用

> t('key')括号内的内容是翻译文件中对应的key

1. 使用hook方式

   ```tsx
   import React from 'react';

   // the hook
   import { useTranslation } from 'react-i18next';

   function MyComponent () {
    const { t, i18n } = useTranslation();
    return <h1>{t('test_text')}</h1>
   }
   ```
2. 使用HOC方式

   ```tsx
   import React from 'react';

   // the hoc
   import { withTranslation } from 'react-i18next';

   function MyComponent ({ t }) {
    return <h1>{t('test_text')}</h1>
   }

   export default withTranslation()(MyComponent);
   ```
3. 使用 render prop

   ```tsx
   import React from 'react';

   // the render prop
   import { Translation } from 'react-i18next';

   export default function MyComponent () {
    return (
      <Translation>
        {
          t => <h1>{t('test_text')}</h1>
        }
      </Translation>
    )
   }
   ```

   翻译json文件中

   ```json
   {
      'test_text': 'hello world'
   }
   ```
4. 使用Trans组件

   ```tsx
   import React from 'react';
   import { Trans } from 'react-i18next';

   export default function MyComponent () {
    return <Trans><H1>Welcome to React</H1></Trans>
   }

   // the translation in this case should be
   "<0>Welcome to React</0>": "<0>Welcome to React and react-i18next</0>"
   ```

#### 如果是在ts文件中使用

```ts
import i18next from './i18n'

i18next.t('my.key')
```


React-i18next是一款强大的国际化框架forreact/reactnative,基于i18next，其作用就是项目可以实现多语言。下面我将介绍一下react-i18n的使用安装#npm$npminstallreact-i18nexti18next--save初始化配置选项resource:资源初始化lng：使用的语言fallbackLng:兜底语言debug:将日志打印到控制台inter

Web项目国际化通关手册

教程简介

文章列表

React 支持多语言国际化 -- i18next

在项目中快速使用React-i18next