我尝试在我的应用程序中实现react-i18 next，目的是创建法语和英语的切换按钮。我不明白为什么它不工作，我认为它与JSON文件的识别有关，但我不确定。
它按原样呈现我放在{t("submit")}中的"submit"字符串，并且不将其作为转换文件中的键。应该是登录
下面是相关代码
index.jsx:

import { createRoot } from "react-dom/client";
import {
 createBrowserRouter,
 RouterProvider,
 Outlet,
} from "react-router-dom";
import "./i18n";
import {Suspense} from "react"; 
import MonitoringOverview from "./routes/MonitoringOverview";
import PerformanceQuality from "./routes/PerformanceQuality";
import Finance from "./routes/Finance";
import Navbar from "./components/Navbar/Navbar";
import "./App.css";
import LoginScreen from "./routes/LoginScreen/LoginScreen";
import UserConfig from "./routes/UserConfig/UserConfig.js";
import Simulation from "./routes/Simulation";
import Fraud from "./routes/Fraud";

const AppLayout = () => {
 return (
   <Suspense fallback={null}>
 <>
   <Navbar />
   <Outlet />
 </>
 </Suspense>
);

}

const router = createBrowserRouter([
 {
   path: '/',
   element: <LoginScreen />
 },
 {
   element: <AppLayout />,
   children: [
     {
       path: "monitoringoverview",
       element: <MonitoringOverview />,
     },
 
     {
       path: "performancequality",
       element: <PerformanceQuality />,
     },

     {
       path: "finance",
       element: <Finance />,
     },
     {
       path: "simulation",
       element: <Simulation />,
     },
     {
       path: 'userconfig',
       element: <UserConfig />
     },
     {
       path: 'fraud',
       element: <Fraud />
     },
   ],
 },
]);

createRoot(document.getElementById("root")).render(
 <RouterProvider router={router} />
 
);

i18n.js：

import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next';

i18n.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
    backend: {
        //translation file path
        loadPath: "/public/assets/i18n/{{ns}}/{{lng}}.json",
    },
    fallbackLng: "en",
    //disableed in production
    debug: false,

    // can have multiple namespaces to divide translation into smaller pieces and load them on demand
    ns: ["login","navbar"],
    interpolation: {
        escapeValue: false,
        formatSeperator: ",",
    },
    react: {
        wait: true,
    },
})

export default i18n;

LoginScreen.js:（仅导入相关函数{t}和登录按钮值并请登录文本来测试是否有效，也可使用Translation（）：

import React, {useState} from 'react'
import "./LoginScreen.css"
import {Navigate} from "react-router-dom";
import pangeaLogo from "./images/pangealogosmall.png"

// i18n implementation
import { useTranslation } from 'react-i18next'; 
function LoginScreen() {
// React States
  const [errorMessages, setErrorMessages] = useState({});
  const [isSubmitted, setIsSubmitted] = useState(false);

  const { t } = useTranslation(["login"]);
//Database for demo authentication
  const database = [
    {
      username: "admin",
      password: "pangea123",
    },
    {
      username: "admin2",
      password: "Pangea1234$",
    }
  ];

  const errors = {
    uname: "invalid username",
    pass: "invalid password",
  };

//Submit handling
const handleSubmit = (event) => {
  //Prevent page reload
  event.preventDefault();
  var { uname, pass } = document.forms[0];

  // Find user login info
  const userData = database.find((user) => user.username === uname.value);

  // Compare user info
  if (userData) {
    if (userData.password !== pass.value) {
      // Invalid password
      setErrorMessages({ name: "pass", message: errors.pass });
    } else {
      setIsSubmitted(true);
    }
  } else {
    // Username not found
    setErrorMessages({ name: "uname", message: errors.uname });
  }
};

  //Error messages handling
  const renderErrorMessage = (name) =>
    name === errorMessages.name && (
      <div className="error">{errorMessages.message}</div>
    );

  //Login Form
  const renderForm = (
    <div className="form">
      <form action="" onSubmit={handleSubmit}>
        <div className="input-container">
        <label for="inp" class="inp">
          <input type="text" id="inp" placeholder="&nbsp;"  name="uname" required/>
          <span class="label">Username</span>
          <span class="focus-bg"></span>
        </label>
          {renderErrorMessage("uname")} 
        </div>
        <div className="input-container">
        <label for="inp" class="inp">
          <input  id="inp" placeholder="&nbsp;" type="password" name="pass" required />
          <span class="label">Password</span>
          <span class="focus-bg"></span>
        </label>
          {renderErrorMessage("pass")}
        </div>
        <div className="button-container">
        <input type="submit" value={t("submit")} />
        </div>
      </form>
    </div>

);

return(
  <div className="app">
      <div className="login-form">
        <img className='pangeaLogo' src={pangeaLogo} alt="pangeaLogo" />
        <div className="title">Welcome to Pangea Insights Application</div>
        <div className='project-name'>Congo DRC Operational Process</div>
        <div className='login-please'>Please {t("submit")}</div>
        {isSubmitted ? <Navigate to="/monitoringoverview" />: renderForm }
      </div>
    </div>
);
}

export default LoginScreen

en.js：（英语json文件只是为了检查它是否工作）

{
    "submit": "Login"
}

我试着检查翻译加载路径并查找键入错误，但没有任何效果。
先谢谢你了。