?首先在 src 下設置 i18n.js 文件
// 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 langinterpolation: {escapeValue: false, // React avoid XSS},});export default i18n;然后再主文件引入文件
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最后直接使用就行
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>)
