项目文件位置
1、在根public目录下新建locales/cn 和 locales/en 文件夹 （推荐不是强制）
import i18n from "i18next";import Backend from "i18next-xhr-backend";import { initReactI18next} from 'react-i18next';i18n.use(Backend) //嗅探当前浏览器语言 .use(initReactI18next) //init i18next .init({ debug: false, lng: "cn", //默认语言 fallbackLng: "cn", whitelist: ["en", "cn"], //可切换的语言 backend: { loadPath: "/locales/{{lng}}/{{ns}}.json", // 两个参数分别为18n.language 和 t()中的参数 }, })export default i18n;
需要注意Backend的使用
import React, { useState, useEffect} from 'react';import { Button } from "antd";import { useTranslation } from 'react-i18next'import './i18n'import 'antd/dist/antd.css';require('./theme-main.scss')
function App() { let {t, i18n} = useTranslation(["common", "home"]); return ( <div className="App"> <Button className="" onClick={() => { console.log(i18n.language) i18n.changeLanguage(i18n.language=='en'?'cn':'en')} }>切换语言</Button> <label>这里是要切换的文本</label> {t("common:home")} {t("home:title")} </div> );}export default App;
方法调用注意事项
<Suspense fallback={<div>Loading</div>}><App /></Suspense>
文件名不要用 - 要使用驼峰 或者_
useTranslation(["common", "home"]) 该方法的参数不可缺失 否则找不到对应的文件参数
