"i18next: missingKey" при использовании "response-i18next" и "Reaction-router-dom"

Question

Я работаю над приложением React, в котором я хотел бы использовать i18next. Для этого я добавил i18next а также react-i18next к моему приложению, и все, кажется, работает как шарм.

Мое приложение использует BrowserRouter от реакции-маршрутизатора для переключения между различными представлениями. Когда я загружаю корневой URL на http://localhost:3000/, все работает как чудо. Я могу переключать страницы, которые затем переводятся без проблем. BrowserRouter отправляет изменения URL в историю браузера, чтобы пользователи могли использовать кнопки "Назад" и "Вперед" в своем браузере для навигации. Это означает, что после того, как пользователь щелкнет один из пунктов меню в приложении, URL-адрес изменится, то есть с http://localhost:3000/ на http://localhost:3000/suppliers.

Если после такого изменения я нажму кнопку обновить, возникает проблема: консоль показывает i18next::translator: missingKey undefined translation и мнение не переведено. Такое же поведение проявляется при добавлении перенаправления с корневого URL на страницу по умолчанию. Странно то, что весь корневой пользовательский интерфейс приложения (заголовок, боковая панель) переведен, это только часть страницы, которой управляет реагирующий маршрутизатор (каждый компонент вложен в соответствующий <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) без четкого решения и для более старой версии реакции-i18next. Я не совсем уверен, как интегрировать реактив-маршрутизатор с реактив-i18next, чтобы предотвратить это поведение.

Редактировать еще одну странную вещь является тот факт, что вызов i18n.changeLanguage распространяется на все представления, кроме компонентов, вложенных в <Route>... Я думаю, что это может быть связано, но я все еще не смог найти решение...

Answer 1

Я не нашел реального решения для ситуации, которую я описал, но на основе документации для компонента Trans я переключил свои взгляды на использование t вместо Trans и они начали работать. Поскольку мне не нужно сложное форматирование для моих переведенных строк, это хорошее решение. Другим решением было бы обернуть компонент, которому требуется Trans, в HOC-решение, которое, похоже, также работает.