“i18next：missingKey”同时使用“react-i18next”和“react-router-dom”答案

【问题标题】："i18next: missingKey" whilst using 'react-i18next' and 'react-router-dom'“i18next：missingKey”同时使用“react-i18next”和“react-router-dom”
【发布时间】：2019-07-13 02:38:42
【问题描述】：

我正在开发一个我想在其中使用 i18next 的 React 应用程序。为此，我已将 i18next 和 react-i18next 添加到我的应用程序中，一切似乎都像魅力一样工作。

我的应用使用react-router 中的BrowserRouter 在各种视图之间切换。当我在 http://localhost:3000 加载根 URL 时，一切都像魅力一样运行。我可以切换页面，然后翻译没有任何问题。 BrowserRouter 将 URL 更改推送到浏览器历史记录，以便用户可以使用浏览器中的后退和前进按钮进行导航。这意味着一旦用户单击应用程序中的某个菜单项，URL 就会发生变化，即从 http://localhost:3000 变为 http://localhost:3000/suppliers。

如果我在进行此类更改后点击刷新，则会出现问题：控制台显示 i18next::translator: missingKey undefined translation 并且视图未翻译。当添加从根 URL 到默认页面的重定向时，会显示相同的行为。奇怪的是，整个应用程序的根 UI（标题栏、侧边栏）都被翻译了，它只是由 react-router 管理的页面的一部分（每个组件都嵌套在相关的<Route> 中）显示未翻译。这也只是浏览器加载的事实，因此在整个页面刷新或初始导航到页面之后。如果我在加载后在我的应用中导航，即使导航到同一个视图，也会显示翻译后的视图。

我将<App>-组件中的所有内容都包装在<Suspense>-block 中，包括<BrowserRouter>，但问题仍然存在。我的 JSX 结构看起来有点像这样：

<App>
    <Suspense fallback={<Loader /}>
        <BrowserRouter>
            <SideMenu>
                {/* Translated objects are shown here */}
            </SideMenu>
            <HeaderBar>
                {/* Translated objects are shown here as well */}
            </HeaderBar>
            <Views>
                <Route path="/sample" component={SampleComponent} /> {/* SampleComponent will not be translated after changing language or navigating to `/sample` immediately/by refreshing` */}
            </Views>
        </BrowserRouter>
    </Suspense>
</App>

我正在使用一个非常简单的配置：

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import { initReactI18next } from 'react-i18next';

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    fallbackLng: 'nl',
    debug: true,
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

我在 GitHub (https://github.com/i18next/react-i18next/issues/322) 上发现了一个较旧的问题，没有明确的解决方案，并且是较旧版本的 react-i18next。我不完全确定如何将 react-router 与 react-i18next 集成以防止这种行为。

编辑另一个奇怪的事情是，对i18n.changeLanguage 的调用被传播到除了嵌套在<Route> 中的组件之外的每个视图......我认为这可能是相关的，但我一直没找到解决办法……

【问题讨论】：

标签： reactjs react-router react-router-dom i18next react-i18next

【解决方案1】：

对于我所描述的情况，我还没有找到实际的解决方案，但是根据Trans 组件的文档，我将我的观点切换为使用t 而不是Trans，他们开始工作了。因为我的翻译字符串不需要复杂的格式，这是一个很好的解决方案。另一种解决方案是将需要 Trans 的组件包装在 HOC 解决方案中，这似乎也可以。

【讨论】：