react i18next 抛出翻译器丢失密钥翻译和 useTranslation() 挂钩不起作用

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

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

1. 首先，您需要制作两个翻译文件，其中缺少一些键及其值。

假设有translationEN.json -

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

和翻译DE.json -

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

2. 在 i18n.js 中导入上述文件并在 i18n init 中添加 resources 和 lng

    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",
   

解决方案已添加此处

Answer 2

我在这里看到解决方案：您可以阅读更多内容。