i18next перевод вне компонента

Я новичок в i18next, пытаюсь локализовать / перевести сайт. Все работает для перевода внутри компонента, но снаружи (означает файлы json с i18n.t (), он не извлекает необходимую информацию, а показывает значение по умолчанию.

Я использую приложение create-response-app, и это настройки по умолчанию для справки по папкам, возможно, это ключевая проблема, но я не могу понять, почему и что нужно изменить.

import i18n from '../../i18n';


const navigation = [
    {
        'id'      : 'dashboard',
        'title'   : i18n.t('analytics.title', 'NOT FOUND'),
        'type'    : 'group',
        'icon'    : 'apps',

    }
  ]

export default navigation;

А вот настройки для файла i18n.js:

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

i18n

  .use(detector)
  .use(Backend)
  .use(initReactI18next)
  .init({
    lng: localStorage.getItem('language') || 'en',
    backend: {
      /* translation file path */
      loadPath: '/assets/i18n/{{ns}}/{{lng}}.json'
    },
    fallbackLng: ['en', 'se', 'da'],
    debug: true,
    ns: ['translations'],
    defaultNS: 'translations',
    keySeparator: false,
    interpolation: {
      escapeValue: false,
      formatSeparator: ','
    },
    react: {
      wait: true
    }

  })

  export default i18n;

и для index.js:

import 'typeface-muli';
import './react-table-defaults';
import './react-chartjs-2-defaults';
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";
import './styles/index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import App from 'app/App';

 ReactDOM.render(
   <I18nextProvider i18n={i18n}>
   <App />
   </ I18nextProvider>
   ,
   document.getElementById('root'));

serviceWorker.unregister();

Я просто получаю значение по умолчанию: "НЕ НАЙДЕН" ...


json i18next react-i18next
person Osia    schedule 19.07.2019    source источник
comment
Почему у вас поменялись местами языки и пространства имен? loadPath: '/assets/i18n/{{ns}}/{{lng}}.json'   -  person Pavel Ye    schedule 07.09.2019

Ответы (1)


arrow_upward
6
arrow_downward

Вы используете серверную службу для асинхронного получения переводов в браузере. При импорте i18n вы, вероятно, ожидали, что перевод будет легко доступен, но это не так - i18n.init также является асинхронным методом (если вы попытаетесь и дождетесь его, вы сможете использовать функцию t).

Один из возможных подходов - определение ключа перевода:

const navigation = [
  {
    ...
    'title_key': 'analytics.title',
    ...
  }
]

И позже передаем его t внутри компонента:

navigation.map(({ title_key }) => <li>t(title_key)</li>)
person Pavel Ye    schedule 06.09.2019
comment
Спасибо! Действительно шикарная и умная идея! - person Osia; 24.09.2019