React-i18next: after page reload , getting missingKey problem

[forestfuture89]

Question about react-i18next

Questions should be posted on StackOverflow

Before page reload , this is working well ..

When i reload by key (F5 , or Ctrl+ F5) , and then this is not working well ..
You can see bugs in here .
https://www.screencast.com/t/Q6JNPUCSJh
https://www.screencast.com/t/j6JOG7A669Ub
Not sure what is the problem ..
This is init function.

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

        react:{
            wait : true
        }
    });

This is source code of side bar

import React from 'react'
import {Trans} from 'react-i18next';
export default {
  items: [
    {
      name: <Trans i18nKey="menu.dashboard"/>,
      url: '/test',
      icon: 'icon-speedometer',
    },
    {
      name: <Trans i18nKey="menu.calendars"/>,
      url: '/test',
      icon: 'icon-calendar'
    },
]
}

What is wrong in here ?

[jamuhl]

Your code. i18next.init is async...this code runs before init is done -> means that code runs outside of hook, HOC

[forestfuture89]

Any solution ?
so that i have to use hook or HOC more than Trans ?

[jamuhl]

No hook and HOC assert loading/init is done

Trans component is for translation of JSX components where no simple t function usage is sufficient...all in the docs...read them...

[forestfuture89]

I didn't find solution in the doc ..

So that you mean my i18next.init function is wrong ?

Could you give me example code ?

[jamuhl]

i18next.init();
i18next.t('key'); // -> missing as init not yet done
i18next.language; // -> undefined as language not yet set as init is still running loading translations

<Trans i18nKey='key' /> // -> missing as not init yet

i18next.init({}, () => {
i18next.t('key'); // -> ok
i18next.language; // -> ok

withTranslations()(function() {
return <Trans i18nKey='key' />; // -> ok as Suspended
});

```