react 配置i18n.js

好的，针对您的问题，我提供以下步骤：

1. 首先，安装 `react-i18next` 和 `i18next` 两个依赖包。

npm install react-i18next i18next --save

2. 在项目中创建 `i18n.js` 配置文件，内容如下：

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

// 导入语言包
import translationEN from './locales/en/translation.json';
import translationZH from './locales/zh/translation.json';

const resources = {
  en: {
    translation: translationEN,
  },
  zh: {
    translation: translationZH,
  },
};

i18n.use(initReactI18next).init({
  resources, // 语言包资源
  lng: 'en', // 默认语言
  fallbackLng: 'en', // 回退语言
  interpolation: {
    escapeValue: false, // 不转义特殊字符
  },
});

export default i18n;

3. 在 `index.js` 中引入 `i18n.js` 配置文件

import i18n from './i18n';

4. 在需要支持多语言的组件中，使用 `useTranslation` 或 `withTranslation` 方法来获取翻译函数。

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

function MyComponent() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}

export default MyComponent;

5. 在 `locales` 目录下创建语言包文件夹，并在其中创建对应的语言 JSON 文件，例如：

locales/
  en/
    translation.json
  zh/
    translation.json

6. 编辑语言包文件，例如 `translation.json`：

{
  "title": "Hello",
  "description": "Welcome to my app"
}

7. 在需要使用多语言的地方，使用 `t('key')` 方法来获取翻译后的文本。

以上就是 React 中配置 i18n.js 的基本步骤，您可以根据自己的项目需求进行相应的调整和修改。希望对您有所帮助！