React+TS前台项目实战（三）-- 国际化配置

前言

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

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

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(); // 获取i18n

  useEffect(() => {
    i18n.init({ lng: locale });
  }, [locale, i18n]); // 初始化i18n，监听到变化时更新配置

  // 没有匹配到父级路由zh|en，并且 locale不是404，重定向到404
  if (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布局搭建】。关注本栏目，将实时更新。