如何在React中使用i18next动态为URL添加语言标识？

1. 调整语言检测规则 #

首先要确保LanguageDetector能优先从URL路径读取语言标识，修改i18n初始化配置，把path移到检测顺序的最前端，并明确语言在路径中的位置：

import i18n from 'i18next'
import HttpApi from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .use(HttpApi)
    .init({
        supportedLngs: ['ru', 'en', 'kk'],
        fallbackLng: "en",
        detection: {
            order: ["path", "cookie", "localStorage", "htmlTag", "subdomain"], // 优先从路径检测语言
            caches: ["cookie"],
            lookupFromPathIndex: 0, // 指定从路径第一个分段读取语言（如/en中的en）
        },
        interpolation: {
            escapeValue: false
        }
    });

export default i18n;

2. 切换语言时同步更新URL #

当前切换语言功能仅修改了i18n实例的语言，未同步更新URL。需要在切换函数中添加路径修改逻辑：

无React Router场景 #

直接操作浏览器历史API：

const changeLanguage = (lng) => {
    // 过滤掉路径中已存在的语言分段
    const pathSegments = window.location.pathname.split('/').filter(seg => seg && !i18n.options.supportedLngs.includes(seg));
    // 构建新路径
    const newPath = `/${lng}${pathSegments.length ? '/' + pathSegments.join('/') : ''}`;
    // 更新URL并切换语言
    window.history.pushState({}, '', newPath);
    i18n.changeLanguage(lng);
};

React Router场景 #

利用useNavigate钩子更新路由：

import { useNavigate } from 'react-router-dom';

const changeLanguage = (lng) => {
    const navigate = useNavigate();
    const pathSegments = window.location.pathname.split('/').filter(seg => seg && !i18n.options.supportedLngs.includes(seg));
    const newPath = `/${lng}${pathSegments.length ? '/' + pathSegments.join('/') : ''}`;
    navigate(newPath);
    i18n.changeLanguage(lng);
};

3. 初始加载时自动补全语言路径 #

对于不带语言标识的访问路径（如/或/news），需要自动重定向到带默认语言的路径，在根组件中添加初始化逻辑：

import { useEffect } from 'react';

function App() {
    useEffect(() => {
        const pathSegments = window.location.pathname.split('/').filter(seg => seg);
        // 检查路径首段是否为支持的语言，否则重定向
        if (!pathSegments.length || !i18n.options.supportedLngs.includes(pathSegments[0])) {
            const targetPath = `/${i18n.language}${window.location.pathname !== '/' ? window.location.pathname : ''}`;
            window.location.replace(targetPath);
        }
    }, []);

    // 组件其余内容
}

4. 后端路由适配（若有） #

如果项目依赖后端服务，需配置路由规则，让/en/*、/ru/*等所有带语言前缀的路径都指向前端入口文件（如index.html），避免出现404错误。

内容的提问来源于stack exchange，提问作者Smile_mask