我正在做一个React项目，我从i18nexus添加了国际化，我试图在一个普通的JS文件中使用翻译。
索引. js '

import React, { Suspense } from "react";
import { BrowserRouter } from "react-router-dom";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "./i18n.js";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <React.StrictMode>
      <Suspense fallback="loading">
        <App />
      </Suspense>
    </React.StrictMode>
  </BrowserRouter>
);
reportWebVitals();

`
n. js

import i18next from "i18next";
import HttpBackend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

const apiKey = "sQeJnBmSuGryd28mX8s5mQ";
const loadPath = `https://api.i18nexus.com/project_resources/translations/{{lng}}/{{ns}}.json?api_key=${apiKey}`;

i18next
  .use(HttpBackend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",

    ns: ["default"],
    defaultNS: "default",

    supportedLngs: ["en", "fr"],

    backend: {
      loadPath: loadPath
    }
  });
export default i18next;

Data.js

import i18next from "./i18n.js";

export const NavigationMenu = [
  {
    id: 1,
    title: "home",
    text: i18next.t("menu_home"),
    path: "/"
  },
  {
    id: 2,
    title: "shop",
    text: i18next.t("menu_shop"),
    path: "/shop"
  }
];

这就是我想要Map数据的地方：

import React from "react";
import "./Header.css";
import { NavigationMenu } from "../Data.js";
function Header() {
  return (
    <div className="header">
      <div className="header__menu">
        <ul>
          {NavigationMenu.map(item => (
            <li>{item.text}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default Header;

`
希望你能理解这次的任务，谢谢你的帮助。
我试图将国际化翻译添加到一个普通的JS文件中，然后通过Map在React组件中使用它们。