i18next-browser-languageDetector path not working

Question

I have a problem with detecting language based on path i.e. http://localhost:3000/en or http://localhost:3000/en/subpage should translate my page to English. I can translate it by clicking the button and invoke i18n.changeLanguage('en') but detector seems not working.

import i18n from "i18next";
import { reactI18nextModule } from "react-i18next";
import LngDetector from "i18next-browser-languagedetector";
import backend from "i18next-xhr-backend";


const detectionOptions = {
    order: ['path', 'cookie', 'navigator', 'localStorage', 'subdomain', 'queryString', 'htmlTag'],
    lookupFromPathIndex: 0

}


i18n
    .use(LngDetector)
    .use(backend)
    .use(reactI18nextModule) // passes i18n down to react-i18next
    .init({
        ns: ['translation', 'main'],
        defaultNS: 'translation',
        lng: "pl",
        fallbackLng: 'pl',
        detection: detectionOptions,
        keySeparator: false, // we do not use keys in form messages.welcome

        interpolation: {
            escapeValue: false // react already safes from xss
        },
        debug: true,
        react: {
            wait: true
        }
    }, (err, t) => {
        if (err)
            console.error(err)
    });


export default i18n;

Answer 1

Solution: i18n.lng property should not be set to when using language detector