«i18next: missingKey» при использовании «response-i18next» и «Reaction-router-dom» - PullRequest
Новая
       10

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

0 голосов
/ 19 февраля 2019

Я работаю над приложением 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)без четкого решения и для более старой версии реакции-i18следующий. Я не совсем уверен, как интегрировать реактив-маршрутизатор с реактив-i18следующий, чтобы предотвратить это поведение.

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

1 Ответ

0 голосов
/ 20 февраля 2019

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

...