react 实现 i18next 国际语言切换

项目基础； react + vite

依赖安装： npm install i18next react-i18next --save

一. 创建目录： src/i18n/index.js

// 后面可单独配置resources，配置后只要i18n.init()即可
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进行导入

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;

三.使用区别

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 Home

// 或者高阶组件用法

import React from 'react';
import {withRouter} from 'react-router-dom'
import { withTranslation, WithTranslation} from "react-i18next"
class Home extends React.Component{
   render(){
        const { t } = this.props;
        return (
           <div ><p>{t('Welcome')}</p>-------</div>
        )
    }
}
export default withRouter(Home)

函数组件使用

import { Route,Switch,Redirect  } from 'react-router-dom'
import { useTranslation } from 'react-i18next';
function Home() {
const { t } = useTranslation();
    return (
        <div className=App>
        <p>{t('Welcome')}</p>
        </div>
    );
}
export default Home;

四.切换语言： 如果遇到需要Api请求的语言数据源

import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { il8nInitData } from '@/i18n/resources'
function Switch(){
    let {i18n} = useTranslation()
    useEffect(() => {
      i18n.init(il8nInitData({
        zh: {
            translation: {
                Welcome: '欢迎进入react',
            },
        },
      }))
    },[])
    const switchLangth = () => {
      if(i18n.language == 'zh') {
        i18n.init(il8nInitData({
          zh: {
            translation: {
                Welcome: '欢迎进入react',
            },
          },
          en: {
            translation: {
                Welcome: 'Welcome to React',
            },
          }
        }))
      }
      i18n.changeLanguage(i18n.language=='en'?'zh':'en')
    }
    return (
        <button onClick={switchLangth}>Primary Button</button>
    )
}
export default Switch