react i18next 抛出 translator missingKey en translation 和 useTranslation() hooks 不工作

Question

我正在设置 react-i18n-next 挂钩来翻译我的应用程序，我遵循了 react-i18n-next 使用的示例，但它抛出了如下错误：

i18next::translator: missingKey
en-US
translation

App.js

import React, { Component, Suspense } from "react";
import { useTranslation, withTranslation, Trans } from "react-i18next";

// use hoc for class based components
class LegacyWelcomeClass extends Component {
  render() {
    const { t } = this.props;
    return <h2>{t("title")}</h2>;
  }
}
const Welcome = withTranslation()(LegacyWelcomeClass);

// Component using the Trans component
function MyComponent() {
  return <Trans i18nKey="description.part1" />;
}

// page uses the hook
function Page() {
  const { t, i18n } = useTranslation();

  const changeLanguage = lng => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="App">
      <div className="App-header">
        <Welcome />
        <button type="button" onClick={() => changeLanguage("de")}>
          de
        </button>
        <button type="button" onClick={() => changeLanguage("en")}>
          en
        </button>
      </div>
      <div className="App-intro">
        <MyComponent />
      </div>
      <div>{t("description.part2")}</div>
    </div>
  );
}

// loading component for suspense fallback
const Loader = () => (
  <div className="App">
    <div>loading...</div>
  </div>
);

// here app catches the suspense from page in case translations are not yet loaded
export default function App() {
  return (
    <Suspense fallback={<Loader />}>
      <Page />
    </Suspense>
  );
}

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({
    fallbackLng: "en",
    debug: true,

    interpolation: {
      escapeValue: false // not needed for react as it escapes by default
    }
  });

export default i18n;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

// import i18n (needs to be bundled ;))
import "./i18n";

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

示例代码可用 here，我不知道我遗漏了什么，最好能得到一些基本的工作示例，以及任何对此非常有帮助的帮助。

我的要求是，我需要将我的应用程序翻译成其他语言，例如从 en 到 fr，我唯一的上下文是 en 文件。

Answer 1

上面的代码中有一些你需要做的事情

首先你需要制作两个翻译文件，其中你缺少一些键和它们的值。

假设translationEN.json-

{
  "title": "Title",
  "Welcome to React": "Welcome to React and react-i18next",
  "description": {
    "part2": "some description"
  }
}

和translationDE.json-

{
  "title": "DE ***** Title",
  "Welcome to React": "DE  **** Welcome to React and react-i18next",
  "description": {
    "part2": "DE  **** some description"
  }
}

在i18n.js中导入以上文件并在i18n init[=中添加resources和lng 14=]

 import translationEN from "../src/translationEN.json";
 import translationDE from "../src/translationDE.json";

 const resources = {
   en: {
     translation: translationEN
   },
   de: {
     translation: translationDE
   }
 };

 i18n
  .use(Backend)    
  .use(LanguageDetector)    
  .use(initReactI18next)    
  .init({
   resources,
   lng: "en",

添加解决方案here

react i18next 抛出 translator missingKey en translation 和 useTranslation() hooks 不工作

react i18next throws translator missingKey en translation and useTranslation() hooks not working

i18next

reactjs

react-i18next