从不同的 JSON 文件读取 i18n [React-i18nnext]

Question

我是 React-i18nnext 库的新手。我尝试将翻译分成文件，以便每个页面都有一个单独的 JSON 文件，而不是单个文件。

我对如何执行本指南中的以下步骤感到困惑：

---

我如何尝试从其他文件实现 i18n：

我使用以下代码来调用默认translate.json文件：

<h1>{t('title')}</h1>

但我想调用不同的文件，所以我必须根据指南使用：

<h1>{t('test:title')}</h1>

如果我使用文件translation.json- 一切正常，但如果我使用文件的另一个名称 - 它会失败并出现错误：

i18next::translator: missingKey en test title title

我的应用程序中的文件：

---

其他代码

我按照图书馆官方页面上的“逐步”指南进行操作。

这是我的i18n.js文件：

<h1>{t('title')}</h1>

为了更好地概述，我将代码添加到codesandbox：

Answer 1

为了在同一页面中使用多个命名空间，需要在调用时指定useTranslation。

export default function App() {
  const [t] = useTranslation(["translation", "customFile"]);
  // ---------------------------------------------^

  return (
    <div className="App">
      <button onClick={() => changeLanguageOnClick("en")}>English</button>
      <button onClick={() => changeLanguageOnClick("de")}>German</button>
      <h1>{t("title")}</h1>
      <h2>{t("customFile:title")}</h2>
    </div>
  );
}

这是它的样子： https://codesandbox.io/s/intelligent-shockley-q588u ?file=/src/App.js:243-304