react 使用 i18next 搭配 Ant Design 完成全局国际化配置

1.安装i18next 和 Ant Design

npm install react-i18next i18next --save

npm install antd --save

2.初始配置

在项目根目录下新建 language 文件夹，并建立相应文件 (如图)

（文件内容如下）

// language / index.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import enUsTrans from "./modules/en";
import zhCnTrans from "./modules/zh";

i18n.use(initReactI18next).init({
    // 选择默认语言，选择内容为上述配置中的 key，即 en/zh
    lng: "zh",
    // 设置资源文件
    resources: {
        en: {
            translation: enUsTrans,
        },
        zh: {
            translation: zhCnTrans,
        },
    },
    // 表示当用户浏览器语言设置不是中文时，备选的语言为中文
    fallbackLng: "zh",
    interpolation: {
        escapeValue: false, // React 已经默认进行 XSS 保护
    },
});
export default i18n;

// language/modules/zh.ts
export default {
    login: {
        login: "登录",
        rememberMe: "记住我",
        userName: "用户名",
        password: "密码",
        inputUsername: "请输入用户名",
        inputPassword: "请输入密码",
    }
};

// language/modules/en.ts
export default {
    login: {
        login: "Login",
        rememberMe: "Remember me",
        username: "Username",
        password: "Password",
        inputUsername: "Please enter your username",
        inputPassword: "Please enter your password",
    }
};

3.导入配置

main.tsx

// main.tsx
// ---主要代码
import "@/language/index";

// ---其他的代码
import React from "react";
import ReactDOM from "react-dom/client";
import "@/styles/reset.less";
import "@/styles/common.less";
import App from "./App";
import "@/assets/iconfont/iconfont.less";

// 导入React Redux 提供的Provider 组件
import { Provider } from "react-redux";
// 导入redux-persist提供PersistGate组件
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "@/store";

// React Redux 包含一个<Provider />组件，一般用它使用在整个应用的最外层,接受 Redux store 作为 props
// redux-persist 持久化插件为我们提供一个<PersistGate>组件, 接受 persistor 作为 props 传递给<PersistGate>
ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <Provider store={store}>
            <PersistGate persistor={persistor}>
                <App />
            </PersistGate>
        </Provider>
    </React.StrictMode>,
);

App.tsx  (使用 redux 储存当前全局语种，相关代码不放了）

// App.tsx

import { ConfigProvider, theme } from "antd";
import type { ConfigProviderProps } from "antd";
import enUS from "antd/locale/en_US";
import zhCN from "antd/locale/zh_CN";
import { RootState, useSelector, useDispatch } from "@/store";
import { setLanguage } from "@/store/modules/global";
import i18next from "i18next";

type Locale = ConfigProviderProps["locale"];

/**
 * @description 获取浏览器默认语言
 */
export const getBrowserLang = (): LanguageType => {
    let browserLang = navigator.language;
    let defaultBrowserLang: LanguageType = "";
    if (
        browserLang.toLowerCase() === "cn" ||
        browserLang.toLowerCase() === "zh" ||
        browserLang.toLowerCase() === "zh-cn"
    ) {
        defaultBrowserLang = "zh";
    } else {
        defaultBrowserLang = "en";
    }
    return defaultBrowserLang;
};

function App() {
    const dispatch = useDispatch();
    const { language } = useSelector(
        (state: RootState) => state.global,
    );
    const [locale, setLocal] = useState<Locale>(enUS);

    // 设置 antd 语言国际化
    const setAntdLanguage = () => {
        // 如果 redux 中有默认语言就设置成 redux 的默认语言，没有默认语言就设置成浏览器默认语言
        if (language && language == "zh") return setLocal(zhCN);
        if (language && language == "en") return setLocal(enUS);
        if (getBrowserLang() == "zh") return setLocal(zhCN);
        if (getBrowserLang() == "en") return setLocal(enUS);
    };

    useEffect(() => {
        // 全局使用国际化
        i18next.changeLanguage(language || getBrowserLang());
        dispatch(setLanguage(language || getBrowserLang()));
        setAntdLanguage();
    }, [language]);

    return (
        <HashRouter>
            <ConfigProvider locale={locale}>
                <Router></Router>
            </ConfigProvider>
        </HashRouter>
    );
}

4.使用

以登录页为例

// pages/login.tsx

import { useTranslation } from "react-i18next";
import { useDispatch } from "react-redux";
import { setLanguage, setComponentSize } from "@/store/modules/global";

const LoginForm: React.FC = () => {
    const { t } = useTranslation();
    const dispatch = useDispatch();

    return (
        <>
            // Password / 密码
            <text> {t("login.password")} </text>

            <button onClick={() => dispatch(setLanguage("en"))}>English</button>
            <button onClick={() => dispatch(setLanguage("zh"))}>简体中文</button>
        </>
    );
};

export default LoginForm;