如果你使用這個教程還不能夠解決你的問題的話，直接私信我，免費一對一給你解決。

一、使用vite創(chuàng)建一個react項目

具體的創(chuàng)建方法大家參考vite官方文檔，大概的操作如下，如果需要更詳細的，大家去自行搜索即可

pnpm create vite

因為我這里使用的是ts版本，所以，你自己看著辦吧。

二、安裝依賴

pnpm add i18next i18next-browser-languagedetector i18next-http-backend react-i18next

其中 i18next-browser-languagedetector i18next-http-backend 這倆包我只是參考官方的文檔安裝了，具體的作用請自行搜索吧（付費咨詢也是么的問題，Q～A～Q）。

三、配置i18next

在src目錄下創(chuàng)建一個i18n文件夾，然后創(chuàng)建index.ts文件，內容如下

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
// 檢測當前瀏覽器的語言或者從服務器獲取配置資源,不過也沒有什么用處
import Backend from "i18next-http-backend";
// 嗅探當前瀏覽器語言
import LanguageDetector from "i18next-browser-languagedetector";
import ThemeConfig from "@/config/themeConfig";
import Storage from "@/plugins/utils/storage";
import Constants from "@/plugins/constants";

import zhCN from "antd/lib/locale/zh_CN";
import enUS from "antd/lib/locale/en_US";

export const antI18n = {
	[ThemeConfig.i18nEnum.ZHCN.value]: zhCN,
	[ThemeConfig.i18nEnum.ENUS.value]: enUS,
};

import zhCNLocale from "./modules/zhCN.json";
import enUSLocale from "./modules/enUS.json";

// @ts-ignore
i18n
	.use(Backend)
	.use(LanguageDetector)
	.use(initReactI18next)
	.init({
		resources: {
			[ThemeConfig.i18nEnum.ZHCN.value]: {
				translation: zhCNLocale,
			},
			[ThemeConfig.i18nEnum.ENUS.value]: {
				translation: enUSLocale,
			},
		},
		fallbackLng: Storage.getStorage(Constants.storageKey.i18nLocal) || ThemeConfig.i18nDef,
		lng: Storage.getStorage(Constants.storageKey.i18nLocal) || ThemeConfig.i18nDef,
		preload: ThemeConfig.i18nKeyArr,
		debug: true,
		interpolation: {
			escapeValue: false,
		},
		detection: ["localStorage", "sessionStorage", "cookie"],
	});
export default i18n;

四、配置i18next翻譯文件（注意：必須是.json，且注意命名，一般為zh-cn，zh-CN，zh這幾種遵循官網(wǎng)說的規(guī)則）

在i18n目錄下創(chuàng)建modules目錄，并且創(chuàng)建enUS.json以及zhCN.json，各位可以自行定義，如果小白還不知道怎么擴展的話，付費找我吧。

enUS.json

{
	"msg": "test",
	"menu": {
		"home": "home"
	},
	"page": {
		"loginTitle": "login"
	},
	"antd": {
		"paginationTotal": "Total {{total}} items"
	}
}

znCN.json

{
	"msg": "示例",
	"menu": {
		"home": "首頁"
	},
	"page": {
		"loginTitle": "登錄"
	},
	"antd": {
		"paginationTotal": "共 {{total}} 條"
	}
}

五、在main.ts引入

// import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { RecoilRoot } from "recoil";
import App from "./App";
import "@/plugins/i18n";
// import "antd/dist/reset.css";
import "animate.css";
import "@/assets/styles/index.scss";

// react 18 創(chuàng)建（會導致 antd 菜單折疊時閃爍，等待官方修復）
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
	// * react嚴格模式
	// <React.StrictMode>
	<BrowserRouter>
		<RecoilRoot>
			<App></App>
		</RecoilRoot>
	</BrowserRouter>,
	// </React.StrictMode>,
);

import { useEffect, useState } from "react";
import { ConfigProvider } from "antd";
import { useRecoilValue } from "recoil";
import { Routers } from "@/router";
import Store from "@/store";
import { setHtmlLang } from "@/plugins/utils/i18n";
import { II18nKey } from "@/interface/i18n";
import { antI18n } from "@/plugins/i18n";

export default function APP() {
	const locale = useRecoilValue(Store.useThemeState).i18n as II18nKey;
	const [i18n, setI18n] = useState(antI18n[locale]);

	useEffect(() => {
		setHtmlLang(locale);
		setI18n(antI18n[locale]);
	}, [locale]);

	// theme prefixCls
	return (
		<ConfigProvider locale={i18n} autoInsertSpaceInButton={true} componentSize={"middle"} prefixCls={""}>
			<Routers></Routers>
		</ConfigProvider>
	);
}

六、在頁面中使用

import { Row, Col, Pagination, Switch } from "antd";
import { useSetRecoilState, useRecoilState, useRecoilValue } from "recoil";
import Store from "@/store";
import "@/assets/styles/page/home.scss";
import { useTranslation } from "react-i18next";

export default function Home() {
	const [i18nState, setI18nState] = useRecoilState(Store.i18nState);
	const setThemeState = useSetRecoilState(Store.useThemeState);
	const themeState = useRecoilValue(Store.useThemeState);
	const { t, i18n } = useTranslation();

	const onChange = (checked: boolean) => {
		if (checked) {
			i18n.changeLanguage("zh-CN");
			setThemeState({ i18n: "zh-CN" });
			setI18nState("zh-CN");
		} else {
			i18n.changeLanguage("en-US");
			setThemeState({ i18n: "en-US" });
			setI18nState("en-US");
		}
		console.log(i18nState, themeState);
	};

	return (
		<Row justify="center" className="content-body home-box">
			<Col span={24}>
				{t("msg")}
				<Pagination total={85} showSizeChanger showQuickJumper showTotal={(total) => `${t("antd.paginationTotal", { total: total })}`}></Pagination>
				<Switch defaultChecked onChange={onChange} />
			</Col>
		</Row>
	);
}

完整項目地址：點我跳轉
文章來源地址http://www.zghlxwxcb.cn/news/detail-447085.html

到了這里，關于React18.x + i18next + antd 國際化正確使用姿勢及避坑指南的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！