I18下一次实施

Question

我正在尝试将 react-i18next 实施到我的应用程序中，目的是为法语和英语创建一个切换按钮。我不明白为什么它不起作用，我认为它与识别 JSON 文件有关，但我不确定。

它按原样呈现我放在

"submit"

中的

{t("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"
}

我尝试检查翻译加载路径并查找输入错误，但没有任何效果。

提前致谢。

Answer 1

其实我不是reactjs的专家，但我可以展示我在react-native方面的实现

我是这样把资源放到src文件夹里

src/ 语言 >

   en > common.json
   fr > common.json

普通文件将保存这样的值

{
  "appStrings": {
     "ABOUT": "About",
    }
 }

并在 index.js 文件中导入源代码

import resources from 'src/lang'; // make sure to use correct path
import {I18nextProvider} from 'react-i18next';
import i18next from 'i18next';


// Multilingual support
i18next.init({
  compatibilityJSON: 'v3',
  interpolation: {
    escapeValue: false,
  },
  lng: 'en',
  resources: resources,
});

然后用 i18Next 提供商包装我的应用程序

<I18nextProvider i18n={i18next}>
    <App />
  </I18nextProvider>

我在这样的组件中使用

const {t} = useTranslation();
<Text>{t('t.appStrings.ABOUT')}</Text>

然后你可以改变初始化

lng : 'en/fr' // as per your requirement