Как настроить «response-i18next» с файлами перевода в Gatsby JS. Всегда с ошибкой отсутствующего ключа - PullRequest
Новая
       5

Как настроить «response-i18next» с файлами перевода в Gatsby JS. Всегда с ошибкой отсутствующего ключа

2 голосов
/ 02 февраля 2020

Мне нужно получить перевод из проекта Гэтсби js. Читая всю документацию, вы увидите, что все используют activ-i18next, но у него много разных способов настройки, особенно если вы работаете над Gatsby JS.

Я перепробовал все и всегда получал недостающий ключ ошибка. Что я делаю не так?

Прежде всего, я создал компонент с именем i18n: 

    import i18n from 'i18next';
    import { useEffect } from "react"
    import { initReactI18next } from 'react-i18next';
    import Backend from 'i18next-xhr-backend'; 

     i18n.use(Backend)
          .use(initReactI18next)
          .init({
            lng: 'en',
            fallbackLng: 'en',
            debug: true,
            resources: {
              "backend": { 
                loadPath: '/locales/{{lng}}/{{ns}}.json'
              }
            },
            interpolation: {
              escapeValue: false, // not needed for react as it escapes by default
            },
            ns: ["brands"],
            defaultNS: 'brands',
            keySeparator:false,
            react: {
              wait: true,
            }
          })
  export default i18n;

После этого я повторно использую этот компонент на одной из своих страниц 

import i18n from '../../components/i18n'
    ...
const { t } = useTranslation();
    ...
{t("brands:NIKE")}
...

Это один файл перевода: 

/src/locales/en/brands.json

Содержание брендов. json Файл: 

{ NIKE:"Nike" }

Несмотря на все, я получил следующую ошибку 

i18next::translator: missingKey brands:NIKE

1 Ответ

0 голосов
/ 18 февраля 2020

Вам не нужно указывать {t ("brands: NIKE")}, просто используйте {t ("NIKE")}, а также присваивайте значение атрибута lng, равное переведенному имени файла в файле i18n.

...