React-I18Next显示了关键名称而不是它的值

Question

我正在尝试为我的React-Creat-App项目使用不同的语言，并且面临着这个问题，其中关键名称在DOM中显示而不是其值。

index.js看起来像这样：

import React from "react";
import ReactDOM from "react-dom";
import "./index.scss";
import App from "./components/App/App";
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import HttpApi from "i18next-http-backend";

i18n
  .use(initReactI18next)
  .use(LanguageDetector)
  .use(HttpApi)
  .init({
    debug: true,
    fallbackLng: "ar",
    detection: {
      order: ["htmlTag", "cookie"],
      caches: ["cookie"],
    },
    backend: {
      loadPath: "../public/locales/{{lng}}/translation.json",
    },
    react: { useSuspense: false },
  });

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

locales/ar/translation.json看起来像这样：

{
    "meet_team": "تعرفوا على فريقنا"
}

locales/tr/translation.json看起来像这样：

{
    "meet_team": "ekipimizle tanışın"
}

我想翻译的组件看起来像这样：

import { useTranslation } from 'react-i18next';

const OurTeam = () => {
  const { t } = useTranslation();
  return <h1 className="foo">{t("meet_team")}</h1>;
};

页面上显示的内容是：

meet_team

我该如何解决此问题？

Answer 1

问题是在index.js：

 loadPath: "../public/locales/{{lng}}/translation.json",

将其更改为：

loadPath: "/locales/{{lng}}/translation.json", 

已解决问题