React i18next не меняются языки

Question

React i18next не меняются языки

Рейтинг: 0Ответов: 1Опубликовано: 10.03.2023

Я пытаюсь сделать страницу на которой менялись бы языки и оно выдает мне вот такую ошибку:

"react_devtools_backend.js:2655 i18next::backendConnector: loading namespace translation for language us failed failed parsing /locales/us/translation.json to json"

и вот это:

"i18next::translator: missingKey ru translation main-heading main-heading"

i18n.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<script>

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector";

import translationRU from "./locales/russian/translation.json";
import translationEN from "./locales/english/translation.json";
import translationKZ from "./locales/russian/translation.json";

const resources = {
  en: {
    translation: translationEN,
  },
  kz: {
    translation: translationKZ,
  },
  ru: {
    translation: translationRU,
  },
};

i18n
  .use(Backend)
  .use(I18nextBrowserLanguageDetector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    fallbackLng: "ru",
    debug: true,

    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;

</script>

LocaleContext.js:

import React from "react";

const defaultValue = {
  locale: "ru",
  setLocale: () => {},
};

export default React.createContext(defaultValue);

Подскажите как это можно решить&

css javascript html reactjs i18n

Источник: Stack Overflow на русском

Answer 1

▲ 0

А пробовали по разному прописывать пути?
Например вместо: import translationRU from "./locales/russian/translation.json"

написать import translationRU from "locales/russian/translation.json" и тд

Или второй вариант, попробуйте поменять путь к файлам на сокращенный вариант
Например заменив название папок языка (russian на ru и тд)

И в init добавить такое свойство:

backend: {
  loadPath: 'locales/{{lng}}/translation.json',
}

Здесь в {{lng}} будет автоматически подставляться выбранный язык
Именно так и оставьте, вручную указывать не нужно

React i18next не меняются языки

Ответы