CODEWITHSUNDEEP
reactjsinternationalizationi18next
Zuhair
Zuhair

Reputation: 287

i18n.language is undefined in the url

I have a language detection mechanism from the url lang code. If user is accessing authenticated page without access token, I redirect to login page in the Routes.js.

return user ? (  
      <Component {...props} />  
    ) : (  
      <Redirect to={langUrl(`login`)} />  
    );

LangUrl is a helper function to get url with correct lang code

export const langUrl = (url) => {
  return '/'+ i18n.language +'/'+ url;
};

But I get an undefined in the i18n.language, the redirect url is "/undefined/login". My i18n init file is below

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import HttpApi from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'

i18n
.use(HttpApi)
.use(LanguageDetector)
.use(initReactI18next)
.init({
    supportedLngs: ['en', 'ar'],
    fallbackLng: 'ar',
    debug: false,
    // Options for language detector
    detection: {
        order: ['path', 'cookie', 'htmlTag'],
        caches: ['cookie'],
    },
    react: { useSuspense: false },
    defaultNS: 'translation',
    backend: {
        loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
    },
});

export default i18n;

What is the best way to initiliaze the i18n correctly so that language is not undefined?

Upvotes: 0

Views: 1241

Answers (1)

Mohammad Taha Al-Tamimi
Mohammad Taha Al-Tamimi

Reputation: 644

adding the following value initImmediate: false, in i18n config file please check the full answer here i18n.language undefined in react.js

Upvotes: 1

Related Questions