React 中使用 i18next

安装依赖

# npm
npm i i18next react-i18next i18next-browser-languagedetector
# pnpm
pnpm add i18next react-i18next i18next-browser-languagedetector

i18next 提供了翻译的基本能力。
react-i18next 是 i18next 的一个插件，用来降低 react 的使用成本。
i18next-browser-languagedetector 是用来检测浏览器语言的插件。

创建i18n文件夹

目录

	src
	└──i18n
	  └──locales
	  ┊  ├──en-US
	  ┊  ┊  └──index.ts
	  ┊  └──zh-CN
	  ┊     └──index.ts
	  └──index.ts

locales/en-US/index.ts

export default {
  common: {
    login: 'Login',
    register: 'Register',
  }
}

locales/zh-CN/index.ts

export default {
  common: {
    login: '登录',
    register: '注册',
  }
}

i18n/index.ts

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import translationEN from './locales/en-US';
import translationZH from './locales/zh-CN';

const resources = {
  en: {
    translation: translationEN
  },
  zh: {
    translation: translationZH
  }
};
i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    // language resources
    resources
  });

export default i18n;

使用

在main.tsx中引入

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import './i18n'

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

页面中使用

import { useTranslation } from 'react-i18next';

const App: React.FC = (): React.ReactElement => {
  const { t } = useTranslation();
  return (
    <div >
         {t('common.personnalSetting')}
    </div>
  );
}

export default App;

切换语言

import i18n from 'i18next';

const changeLanguage= (val) => {
	i18n.changeLanguage(val); // val入参值为'en'或'zh'
};