只需五步,React项目完成使用i18n国际化封装

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文件导入 方便管理

 

我是马丁的车夫，欢迎转发收藏！