国际化 i18n

先在utlis中创建一个 i18n.js的文件夹

import i18n from ‘i18next’;
import { initReactI18next, useTranslation } from ‘react-i18next’;
import { zh, en } from ‘@/constants/local’
const lng = ‘en’;//默认的语言
i18n
.use(initReactI18next) // passes i18n down to react-i18next 将i18n传递给react-i18next
.init({
resources: {
en: {
translation: en,
},
zh: {
translation: zh,
},
},
lng,
fallbackLng: lng,

interpolation: {
  escapeValue: false,
},

});
export default function Pop(opt){
const { t } = useTranslation()
return <>{t(opt)}</>
}
在src里面引入这个文件
import ‘@/utils/i18n’

之后为了代码的效率和美化 我们要定义一个静态的文件夹 用来存放语言 local
如果是一个中文的话创建一个zh.js

export default {
Welcome: ‘欢迎进入react’,
}

之后再写一个index.js
里面引用

export { default as zh } from ‘./zh’ //引入和抛出是一起写的 新写法

在页面使用的时候我们要
引入
import t from ‘@/utils/i18n’;
{t(‘Welcome’)}