只需五步,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文件導入 方便管理

 

我是馬丁的車夫，歡迎轉發收藏！