Я решил использовать i18next
& react-i18next
для перевода своего приложения React. Все работало нормально, пока я не хотел использовать строки вместо ключей. Мое приложение сообщает, что не может сохранить отсутствующие ключи в файле перевода. json, поскольку они не найдены см. Ошибки консоли . Даже если файлы есть см. Дерево . Также я получаю это сообщения в консоли . Я предполагаю, что проблема очень тривиальна, но я пока не могу найти решение, я надеюсь, что есть кто-то более опытный и может помочь мне избавиться от этой проблемы.
Моя конфигурация i18next:
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
react: {
useSuspense: false, // <---- this will do the magic
wait: true
},
backend: {
loadPath: '/locales/{{lng}}/{{ns}}.json',
addPath: '/locales/add/{{lng}}/{{ns}}',
allowMultiLoading: true,
},
lng: 'en',
nsSeparator: false,
keySeparator: false,
fallbackLng: 'en',
fallbackNS: 'translation',
debug: true,
ns: ["translation", "header", "random"],
defaultNS: "translation",
saveMissing: true
});
i18n
.loadNamespaces(['translation','header'])
.then(() => {});
i18n.on('missingKey', function(lngs, namespace, key, res) {console.log(key)});
export default i18n;
Мой индекс. js файл:
import React from 'react';
import i18n from './i18n/i18n';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import * as serviceWorker from './registerServiceWorker';
import {I18nextProvider} from 'react-i18next';
ReactDOM.render(
<I18nextProvider i18n={i18n}>
<App/>
</I18nextProvider>,
document.getElementById('root')
);
serviceWorker.register();
Я использую ключ так:
{t('Need to save this text')}