---

前言

本文主要讲项目的国际化配置和相关常用方法封装。

---

一、安装国际化相关插件包

npm i i18next react-i18next -S

二、在src/locales目录下创建en.json和zh.json语言包文件

// src/locales/en.json
{"translation": {"navbar": {"home": "Home","charts": "Charts","fee_rate": "Fee Rate","nervos_dao": "Nervos DAO","tokens": "Tokens","xUDT": "xUDT","sUDT": "sUDT","more": "More","language": "Language","language_en": "EN","language_zh": "简体中文"}}
}
// src/locales/zh.json
{"translation": {"navbar": {"home": "首页","charts": "图表","fee_rate": "费率","nervos_dao": "Nervos DAO","tokens": "代币","xUDT": "xUDT","sUDT": "sUDT","more": "更多","language": "语言","language_en": "EN","language_zh": "简体中文"}}
}

三、配置与使用

1. i18n.ts配置详细代码及注释如下

功能说明：
（1）添加初始化配置
（2）配置支持的语言
（3）封装国际化前缀增加/删除的方法

// @/config/i18n.ts
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import en from '@/locales/en.json'
import zh from '@/locales/zh.json'
export const SupportedLngs = ['en', 'zh'] as const
/*** Initializes the internationalization (i18n) library with the provided resources and configuration.** @return {Promise<void>} A Promise that resolves when the i18n library is successfully initialized.*/
i18n.use(initReactI18next).init({resources: {en,zh,},lng: 'zh', // 默认语言supportedLngs: SupportedLngs,fallbackLng: 'zh',interpolation: {escapeValue: false,},
})
export default i18n;
// 支持的语言
export const I18nLangs = ['en', 'zh'] as const
// 添加国际化前缀
export const addI18n = (to: string, locale?: string) => {// 如果没有locale，直接返回if (!locale || !to) return to;return `/${locale}${to}`;
};
// 删除国际化前缀
export const removeI18n = (to: string) => {const isInLocale = SupportedLngs.find((lang) => to.startsWith(`/${lang}`)); // 是否是支持的语言if (!isInLocale) return to; // 不是支持的语言，直接返回return to.replace(`/${isInLocale}`, "");
};

2. 在layout布局组件中初始化，并处理路由跳转问题

说明：
（1）这里主要讲解国际化配置，layout相关布局组件下一篇讲解
（2）由于React Router 6不支持正则写法，所以配置国际化后，跳转需要单独做判断，除去配置的语言前缀，其他的通通跳转404页面

// @/layout/index.tsx
import { useEffect, Suspense } from "react";
import { useParams, Outlet, Navigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
// 引用组件
import { ErrorBoundary } from "@/components/ErrorBoundary";
// 引用样式
import { Page } from "./styled";
const LayOut = () => {const { locale = "en" } = useParams(); // 获取当前语言const [, i18n] = useTranslation(); // 获取i18nuseEffect(() => {i18n.init({ lng: locale });}, [locale, i18n]); // 初始化i18n，监听到变化时更新配置// 没有匹配到父级路由zh|en，并且 locale不是404，重定向到404if (locale && !["zh", "en"].includes(locale) && locale !== "404") {return <Navigate to={`/404`} />;} else {return (// ...<Suspense fallback={<span>loading...</span>}><ErrorBoundary><Outlet /></ErrorBoundary></Suspense>// ...);}
};
export default LayOut;

---

总结

下一篇讲【页面整体layout布局搭建】。关注本栏目，将实时更新。