
首先在 src 下设置 i18n.js 文件
TypeScript
// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en/public';
import zh from './locales/zh/public';
i18n
.use(initReactI18next)
.init({
resources: {
en: { translation: en },//翻译文本
zh: { translation: zh },
},
lng: 'zh',
fallbackLng: 'en', // When no lang
interpolation: {
escapeValue: false, // React avoid XSS
},
});
export default i18n;
然后再主文件引入文件
TypeScript
import RouterGuard from './common/components/router-wrapper/RouterGuard'
import { Router } from './routes/router/RouterRender'
import routesConfig from './routes'
import { BrowserRouter } from 'react-router-dom'
import 'antd/dist/reset.css'
import './index.css'
import './i18n' // 引入
function App() {
return (
<BrowserRouter>
<RouterGuard>
<Router routes={routesConfig} />
</RouterGuard>
</BrowserRouter>
)
}
export default App
最后直接使用就行
TypeScript
import { message } from 'antd';
import './index.scss'
import { useTranslation } from 'react-i18next';
const DataCard = () => {
const { t, i18n } = useTranslation();
const toggleLanguage = () => {
const newLang = i18n.language === 'zh' ? 'en' : 'zh';
i18n.changeLanguage(newLang);
};
return (
<div>
<div style={{ padding: 20 }}>
<h1 className="text-3xl font-bold mb-4">{t('currentName')}</h1>
<button className="bg-blue-400 hover:bg-blue-200 text-white font-bold py-2 px-3 rounded transition duration-100"
onClick={toggleLanguage}>
{t('check')}
</button>
<div className="buttons mt-6">
<button className="bg-red-400 hover:bg-red-200 text-white font-bold py-2 px-4 rounded transition duration-100 mr-2"
onClick={() => message.success(t('successfullyDeleted'))}>
{t('delete')}
</button >
<button className="bg-yellow-400 hover:bg-yellow-200 text-white font-bold py-2 px-4 rounded transition duration-100 mr-2"
onClick={() => message.success(t('successfulOperation'))}>
{t('edit')}
</button>
<button className="bg-green-400 hover:bg-green-200 text-white font-bold py-2 px-4 rounded transition duration-100" onClick={() => message.success(t('successfulOperation'))}>
{t('create')}
</button>
</div>
</div>
</div>
)