recat 在哪里配置i18n

在 React 中配置 i18n，需要使用第三方库 react-i18next。以下是基本的配置步骤：

1. 安装 react-i18next：

npm install react-i18next

2. 创建 i18n.js 文件并配置：

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

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        // 英文翻译
      },
    },
    zh: {
      translation: {
        // 中文翻译
      },
    },
  },
  lng: 'zh', // 默认语言
  fallbackLng: 'en', // 如果当前语言无法找到翻译，将会回退到该语言
  interpolation: {
    escapeValue: false, // 不转义HTML标签
  },
});

export default i18n;

3. 在入口文件中引入 i18n.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import i18n from './i18n'; // 引入 i18n

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

4. 在组件中使用 i18n：

import { useTranslation } from 'react-i18next';

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

  return <div>{t('key')}</div>;
}

其中，'key' 是你在 i18n.js 中定义的翻译内容的键值。根据当前的语言，t('key') 会返回对应的翻译。