I installed i18next in my react app. Removed backend part of i18next as I dont need it. Then created a file at this path: public/locales/en/translation.json

That file contains this:

{
    "key1": "value1en"
}

Previously I created this file according to docs:

src/i18n.js

Containing this:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
.use(initReactI18next)
.init({
    fallbackLng: 'en',
    debug: true,
    interpolation: {
        escapeValue: false, // not needed for react as it escapes by default
    }
});
export default i18n;

While in src/index.js I added:

import './i18n';

Now from one of my view, I import it this way:

import { useTranslation } from 'react-i18next';
const Index = () => {
    const { t, i18n } = useTranslation();

    return(
        <h1>{t('key1')}</h1>
    )

What I see in the console is this message:

i18next::translator: missingKey en translation key1 key1

And on the page I only see the text "key1", obviously. What am I doing wrong?

CodePudding user response：

Include en file in the init

import translation from  "path_to_file/translation.json"

const resources = {
  en: {
    translation: translation,
  },
};


i18n
.use(initReactI18next)
.init({
    resources,
    fallbackLng: 'en',
    debug: true,
    interpolation: {
        escapeValue: false, // not needed for react as it escapes by default
    },         
    lng: "en",

});

Demo

CodePudding user response：

There are various ways on how translations can be loaded. Please check the official documentation.

• adding resources on init
• after init
• via backend plugin