安装依赖
# 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'
};