path detection not working for react-i18next

833 Views Asked by Faiyaz Siddique At 29 April 2025 at 08:51

My code is this but when I go to localhost/fr ,it is not detecting the language from the path? what am i doing wrong here?

import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import HttpApi from "i18next-http-backend";

i18n
  .use(HttpApi)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    supportedLngs: ["en", "fr"],
    // lng: "en",
    fallbackLng: "en",
    detection: {
      order: ["path", "querystring", "cookie"],
      lookupFromPathIndex: 0,
      lookupQuerystring: "lng",
      caches: ["cookie"],
    },
    backend: {
      loadPath: "/assets/locales/{{lng}}/translation.json",
    },
    // react: { useSuspense: false },
  });

export default i18n;

Original Q&A

There are 1 best solutions below

Bhavesh Daswani On 19 July 2022 at 19:01

You would need to use URL in the following way localhost?lng=fr

From LanguageDetector Package documentation

This is a i18next language detection plugin use to detect user language in the browser with support for:

cookie (set cookie i18next=LANGUAGE) sessionStorage (set key

i18nextLng=LANGUAGE) localStorage (set key i18nextLng=LANGUAGE)

navigator (set browser language) querystring (append ?lng=LANGUAGE to URL) htmlTag (add html language tag <html lang="LANGUAGE" ...) path

(http://my.site.com/LANGUAGE/...) subdomain

(http://LANGUAGE.site.com/...)

I tried using localhost:3000?lng=fr and that was working for me. let me know if that works for you. localhost:3000 is the URL on which create react app is running on.

path detection not working for react-i18next

There are 1 best solutions below

Related Questions in REACTJS

Related Questions in NEXT.JS

Related Questions in REACT-I18NEXT

Related Questions in I18NEXT-BROWSER-LANGUAGEDETECTOR

Trending Questions

Popular # Hahtags

Popular Questions