Question

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

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

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

我将<App>组件中的所有内容都包装在<Suspense>块中，包括<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>中的组件之外……我认为可能是相关，但我仍然找不到解决方案...

Answer 1

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

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

1 个答案: