Почему мои переводы не работают с response-i18next? - PullRequest
Новая
       13

Почему мои переводы не работают с response-i18next?

0 голосов
/ 01 апреля 2020

Это мой конфигурационный файл:

i18n. js: 

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import detector from "i18next-browser-languagedetector";
import { initReactI18next } from 'react-i18next';

const fallbc = ['en'];
const langArr = ['en', 'de'];

i18n
    .use(detector)
    .use(Backend)
    .use(initReactI18next)
    .init({
        backend: {
            loadPath: '/register/locales/{{lng}}/{{ns}}.json'
        },
        fallck,
        debug: true,
        whitelist: langArr,
        interpolation: {
            escapeValue: false,
        },
        react: {
            wait: true,
        },
    });

export default i18n;

И когда я пытаюсь это сделать: 

import i18n from '../i18n';

return (
         <div>
           <button onClick={() => i18n.changeLanguage('de')}>de</button>
           <button onClick={() => i18n.changeLanguage('en')}>en</button>
         </div>
       );

Только Engli sh оказывается, немецкого нет. Что я делаю неправильно?

Что-то не так с моей конфигурацией? Я чувствую, что я действительно близок к решению этого вопроса.

1 Ответ

0 голосов
/ 01 апреля 2020

i18n.Init - функция отложенной загрузки. Вы должны ждать, пока не будет вызван callback. Еще используйте SyncBackend. Еще приложение запуска ленивый.

Образец: 

import i18next from 'i18next';
import SyncBackend from 'i18next-sync-fs-backend';


// working
i18next
  .use(SyncBackend)
  .init({ initImmediate: false });

i18next.t('key'); // -> will return value

Ленивый старт: 

export default (callback) => {
const instance = i18n
    .use(detector)
    .use(Backend)
    .use(initReactI18next)
    .init({
        backend: {
            loadPath: '/register/locales/{{lng}}/{{ns}}.json'
        },
        fallck,
        debug: true,
        whitelist: langArr,
        interpolation: {
            escapeValue: false,
        },
        react: {
            wait: true,
        },
    },() => callback(instance));
};

import i18nInit from '../i18n';

i18nInit((i18n) =>{
// lazy start here
return (
         <div>
           <button onClick={() => i18n.changeLanguage('de')}>de</button>
           <button onClick={() => i18n.changeLanguage('en')}>en</button>
         </div>
       );

})

Еще : https://www.i18next.com/overview/configuration-options

...