如何在React NavbarData中集成useTranslation实现i18n多语言？

核心思路 #

NavbarData.js是普通数据数组，无法直接使用useTranslation钩子，因此我们需要把硬编码的标题替换为翻译键，再在Navbar.js组件中通过useTranslation提供的t()函数解析这些键。

步骤1：修改NavbarData.js，替换为翻译键 #

将数组中每个项的硬编码title替换为对应翻译键，建议重命名为titleKey以明确用途：

import React from 'react'

import startpageIcon from './Icons/startpage.svg';
import performance from './Icons/performance.svg';
import fraud from './Icons/fraud.svg';

export const NavbarData = [
    {
        titleKey: 'navbar.operationalOverview',
        path: '/monitoringoverview',
        icon: <img src={startpageIcon} alt="" />,
        cName: 'nav-text'
    },
    {
        titleKey: 'navbar.performanceQuality',
        path: "/performancequality",
        icon: <img src={performance} alt="" />,
        cName: 'nav-text'
    },
    {
        titleKey: 'navbar.fraudAndAnomalies',
        path: "/fraud",
        icon: <img src={fraud} alt="" />,
        cName: 'nav-text'
    },
]

步骤2：在Navbar.js中处理导航文本翻译 #

遍历NavbarData时，用t()函数解析每个项的titleKey：

// 替换Navbar.js中导航项的渲染代码
{NavbarData.map((item, index) => {
  return (
    <li key={index} className={item.cName}>
      <Link to={item.path}>
        <span className="navbutton-text" >
          <span className="navbutton-icon">{item.icon}</span>
          {t(item.titleKey)} {/* 用翻译函数处理标题 */}
        </span>
      </Link>
    </li>
  );
})}

步骤3：修正页面标题的翻译逻辑 #

调整getPageTitleByUrl和userConfigPageTitle函数，使其存储翻译键而非硬编码文本，确保页面标题支持翻译：

// 替换getPageTitleByUrl函数
const getPageTitleByUrl = (path) => {
  const matchedItem = NavbarData.find((navItem) => navItem.path === path);
  if (matchedItem) {
    setPageName(matchedItem.titleKey); // 存储翻译键
  }
};

// 替换userConfigPageTitle函数
const userConfigPageTitle = () => {
  setPageName("navbar.userInformation"); // 替换为翻译键
};

步骤4：补充翻译文件的键值对 #

确保i18n翻译文件（如public/locales/en/translation.json和public/locales/fr/translation.json）包含对应键值：

英文翻译文件（en/translation.json）

{
  "navbar": {
    "criminalRecords": "Criminal Records",
    "logout": "Logout",
    "operationalOverview": "Operational Overview",
    "performanceQuality": "Performance Quality",
    "fraudAndAnomalies": "Fraud and Anomalies",
    "userInformation": "User Information"
  }
}

法文翻译文件（fr/translation.json）

{
  "navbar": {
    "criminalRecords": "Dossiers criminels",
    "logout": "Déconnexion",
    "operationalOverview": "Aperçu opérationnel",
    "performanceQuality": "Qualité de performance",
    "fraudAndAnomalies": "Fraude et anomalies",
    "userInformation": "Informations utilisateur"
  }
}

内容的提问来源于stack exchange，提问作者Noam TheLoreFnatic Hadad