如何使用 react-i18next 进行中英文切换

要使用 react-i18next 进行中英文切换，需要先安装 react-i18next 和 i18next 两个模块。可以使用以下命令安装：

npm install react-i18next i18next

然后，在你的应用程序中创建一个 i18n 实例，并且设置默认语言和翻译文本。例如：

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

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        hello: 'Hello',
        world: 'World',
      },
    },
    zh: {
      translation: {
        hello: '你好',
        world: '世界',
      },
    },
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false,
  },
});

在这个例子中，我们创建了一个 i18n 实例，并且设置了两种语言（英文和中文），以及翻译文本。默认语言是英文，fallbackLng 指定了如果当前语言不存在时要回退到的语言。

接下来，在你的组件中使用 `useTranslation` 钩子函数来获取翻译文本，并且使用 `i18n.changeLanguage` 方法来切换语言。例如：

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

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

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('hello')}</h1>
      <p>{t('world')}</p>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('zh')}>中文</button>
    </div>
  );
}

export default Example;

在这个例子中，我们使用 `useTranslation` 钩子函数获取翻译文本，然后在组件中渲染翻译文本和切换语言的按钮。点击按钮时，调用 `changeLanguage` 方法来切换语言。

通过这种方式，你就可以使用 react-i18next 在你的应用程序中实现中英文切换。