1

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

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

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

我将<App>-component 中的所有内容都包含在<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>...我认为它可能是相关的，但我仍然无法找到解决方案...

4

1 回答 1

0

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

于 2019-02-20T08:09:55.780 回答