在React应用中实现i18n：将翻译集成到外部数据文件

import React from 'react';
import startpageIcon from './Icons/startpage.svg';
import performance from './Icons/performance.svg';
import fraud from './Icons/fraud.svg';
// import { useTranslation } from 'react-i18next'; // 此行应移除

export const NavbarData = [
    {
        title: 'Operational Overview', // 实际文本
        path: '/monitoringoverview',
        icon: <img src={startpageIcon} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Performance Quality", // 实际文本
        path: "/performancequality",
        icon: <img src={performance} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Fraud and Anomalies", // 实际文本
        path: "/fraud",
        icon: <img src={fraud} alt="" />,
        cName: 'nav-text'
    },
];

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 = [
    {
        title: 'operationalOverview', // 翻译键
        path: '/monitoringoverview',
        icon: <img src={startpageIcon} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "performanceQuality", // 翻译键
        path: "/performancequality",
        icon: <img src={performance} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "fraudAndAnomalies", // 翻译键
        path: "/fraud",
        icon: <img src={fraud} alt="" />,
        cName: 'nav-text'
    },
];

import React, { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { NavbarData } from "./NavbarData"; // 导入更新后的数据
import { IconContext } from "react-icons";
import "./Navbar.css";
// ...其他导入

import { useTranslation } from 'react-i18next'; // 确保已导入

//Navbar function
function Navbar() {
  // ...其他useState和useEffect

  // i18n
  // 使用 keyPrefix 简化翻译键，所有在此 t 函数中调用的键都会自动加上 "navbar.titles" 前缀
  const { t, i18n } = useTranslation("default", { keyPrefix: "navbar.titles" }); 
  const lngs = {
    en: {nativeName: 'English'},
    fr: {nativeName: 'French'}
  };

  // ...getPageTitleByUrl, userConfigPageTitle, useEffect, handleLanguageChange

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        {/* ...navbar header */}

        <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
          <ul className="nav-menu-items" onClick={showSidebar}>
            {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.title)} {/* 在这里应用 t() 函数 */}
                    </span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

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

{
  "navbar": {
    "titles": {
       "operationalOverview": "Aperçu Opérationnel",
       "performanceQuality": "Qualité des Performances",
       "fraudAndAnomalies": "Fraudes et Anomalies"
    },
    "criminalRecords": "Casier Judiciaire",
    "logout": "Déconnexion"
  }
}