1.安装
npm install i18next react-i18next --save
2.src/i18n/index.js(创建文件-封装),并且在app.js导入执行
i18n/index.js
import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; const lng = 'zh'; i18n.use(initReactI18next) // passes i18n down to react-i18next .init({ resources: { en: { translation: { Welcome: 'Welcome to React', }, }, zh: { translation: { Welcome: '欢迎进入react', }, }, }, lng: lng, fallbackLng: lng, interpolation: { escapeValue: false, }, }); export default i18n
必须要在这里App.js进行导入('./i18n')
import './App.css'; import index from './pages/index' import { BrowserRouter as Router, Route } from 'react-router-dom' import './i18n'; function App() { return ( <Router> <div className="App"> <Route path="/" component={index}></Route> </div> </Router> ); } export default App;
3.class类组件或者页面使用 国际化
import React from 'react'; import {withRouter} from 'react-router-dom' import { Translation } from 'react-i18next'; class Home extends React.Component{ render(){ return ( <Translation> { t=>{ return( <div ><p>{t('Welcome')}</p>-------</div> ) } } </Translation> ) } } export default withRouter(Home)
4.函数组件使用
import './App.css'; import { Route,Switch,Redirect } from 'react-router-dom' import { useTranslation } from 'react-i18next'; function App() { const { t } = useTranslation(); return ( <div className=App> <p>{t('Welcome')}</p> </div> ); } export default App;
5.按钮点击切换语言(这里吧切换按钮使用函数组件进行了分离)
注意这里按钮使用了antd-ui库,没有使用的自行改成原生按钮
import React from 'react' import { useTranslation } from 'react-i18next' import { Button } from 'antd'; function Switch(){ let {i18n} = useTranslation() return ( <Button type="primary" onClick={()=>i18n.changeLanguage(i18n.language=='en'?'zh':'en')}>Primary Button</Button> ) } export default Switch
优化建议:在第二步 i18n/index.js文件里两个JSON对象,转化的可以使用两个JS文件导入 方便管理
我是马丁的车夫,欢迎转发收藏!