如何将React+MUI面包屑组件从英文本地化至俄语

我有一个使用MUI Breadcrumbs 组件的React组件，它会根据当前URL自动生成面包屑导航，代码如下：

const Breadcrumbsss = () => {

    const location = useLocation()

    let currentLink = ''

    const crumbs = location.pathname.split('/')
        .filter(crumb => crumb !== '')
        .map(crumb => {
            currentLink += `/${crumb}`

            return (
                <div className="crumb" key={crumb}>
                    <Link to={currentLink}>{crumb}</Link>
                </div>
            )
        })


    return (
        <Breadcrumbs className="breadcrumbs"
                     separator="⯈"
                     aria-label="breadcrumb"
                     sx={{fontSize: "12px", background: "#fff", position:"static"}}>

            {crumbs}
        </Breadcrumbs>
    );
};

export default Breadcrumbsss;

当访问 http://localhost:3000/spravochnik/groupsTable 这类URL时，面包屑会显示spravochnik和groupsTable这些英文路径名，我需要把它切换为俄语显示：将 spravochnik 替换为 Справочник，groupsTable 替换为 Группы。

方式一：路径名映射表（快速实现） #

创建一个键值对映射表，直接将URL中的英文路径名对应到俄语显示文本，遍历路径时替换即可：

const Breadcrumbsss = () => {
    const location = useLocation()
    // 定义路径名到俄语文本的映射关系
    const pathToLabel = {
        'spravochnik': 'Справочник',
        'groupsTable': 'Группы'
    }

    let currentLink = ''

    const crumbs = location.pathname.split('/')
        .filter(crumb => crumb !== '')
        .map(crumb => {
            currentLink += `/${crumb}`
            // 优先使用映射的俄语文本，无映射则保留原路径名
            const displayLabel = pathToLabel[crumb] || crumb

            return (
                <div className="crumb" key={crumb}>
                    <Link to={currentLink}>{displayLabel}</Link>
                </div>
            )
        })

    return (
        <Breadcrumbs className="breadcrumbs"
                     separator="⯈"
                     aria-label="breadcrumb"
                     sx={{fontSize: "12px", background: "#fff", position:"static"}}>
            {crumbs}
        </Breadcrumbs>
    );
};

export default Breadcrumbsss;

方式二：国际化（i18n）库（多语言场景推荐） #

如果后续需要支持更多语言，推荐使用react-i18next这类国际化库，便于统一维护多语言文本：

1. 安装依赖：

npm install react-i18next i18next

2. 配置i18n（新建i18n.js文件）：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
    ru: {
        translation: {
            'spravochnik': 'Справочник',
            'groupsTable': 'Группы'
        }
    },
    en: {
        translation: {
            'spravochnik': 'spravochnik',
            'groupsTable': 'groupsTable'
        }
    }
};

i18n
    .use(initReactI18next)
    .init({
        resources,
        lng: 'ru', // 默认使用俄语
        interpolation: {
            escapeValue: false // React已自动处理XSS，无需额外转义
        }
    });

export default i18n;

3. 修改面包屑组件：

import { useTranslation } from 'react-i18next';

const Breadcrumbsss = () => {
    const location = useLocation()
    const { t } = useTranslation()

    let currentLink = ''

    const crumbs = location.pathname.split('/')
        .filter(crumb => crumb !== '')
        .map(crumb => {
            currentLink += `/${crumb}`

            return (
                <div className="crumb" key={crumb}>
                    <Link to={currentLink}>{t(crumb)}</Link>
                </div>
            )
        })

    return (
        <Breadcrumbs className="breadcrumbs"
                     separator="⯈"
                     aria-label="breadcrumb"
                     sx={{fontSize: "12px", background: "#fff", position:"static"}}>
            {crumbs}
        </Breadcrumbs>
    );
};

export default Breadcrumbsss;

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