react i18next与react-i18next如何配置

React i18next 是一个 React 的国际化插件，而 react-i18next 是它的封装版本。它们都需要进行配置，下面是配置步骤：

1. 安装依赖：

npm install i18next react-i18next

2. 创建 i18n 配置文件：

在项目根目录下创建 `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';

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

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: 'en', // default language
    fallbackLng: 'en', // fallback language
    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

export default i18n;

其中，`translationEN` 和 `translationZH` 是存放翻译文件的目录，可以根据自己的需求进行修改。

3. 在组件中使用：

在需要使用国际化的组件中，可以通过以下方式进行使用：

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

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

  return (
    <div>
      <h1>{t('Welcome to React')}</h1>
    </div>
  );
}

export default MyComponent;

其中，`useTranslation` 是一个 React Hook，用于获取 `t` 和 `i18n` 两个对象。`t` 用于翻译文本，`i18n` 用于切换语言等操作。