CODEWITHSUNDEEP
reactjsreact-routerreact-router-domi18next
Taher Ben sassi
Taher Ben sassi

Reputation: 130

Hoy to add Locale to path using React js and i18next?

I am using React Js and i18next to try to build an app with multiple Language

I want to generate the Local inside my URL, the Problem that the Prefix would be added multiple times in the URL!

Here is my configuration:

i18n.js

i18n
// i18next-http-backend
// loads translations from your server
// https://github.com/i18next/i18next-http-backend
.use(Backend)
// detect user language
// learn more: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// pass the i18n instance to react-i18next.
.use(initReactI18next)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
    debug: true,
    supportedLngs: ['de','en','fr'],
    fallbackLng: 'de',
    whitelist: ['de','en','fr'],
    detection: {
        order: ['path','cookie', 'htmlTag', 'localStorage', 'sessionStorage','subdomain'],
        caches: ['cookie'],
        lookupFromPathIndex: 0,
        checkWhitelist: true
    },
    interpolation: {
        escapeValue: false, // not needed for react as it escapes by default
        // format: (value, format, lng) => { // legacy usage
        //   if (value instanceof Date) {
        //     return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])
        //   }
        //   return value;
        // }
    },
    backend: {
        loadPath: '/locales/{{lng}}/translation.json',
    }
});

Routing:

function App() {
const baseRouteUrl = "/:locale(en|de|fr)?";

return (
    //@todo add baseurl
    <I18nextProvider i18n={i18next}>
        <BrowserRouter >
            <Suspense fallback={<p>...Loading</p>}>
                <Switch>
                    <Route exact path={baseRouteUrl + "/"} component={Home} />
                    <Route path={baseRouteUrl + "/about"} component={About} />
                </Switch>
            </Suspense>
        </BrowserRouter>
    </I18nextProvider>

    );
  }

Navigation:

const Navigation = () => {
const baseUrl = cookies.get('i18next');
return (
    
        <Link to={baseUrl + "/"}> Home </Link>
        <br/>
        <Link to={baseUrl + "/about/"}>About </Link>
  
  );
};

the URL would be:

http://localhost:3000/en/about/

http://localhost:3000/en/de/about/

Thanks for any Help!

Upvotes: 1

Views: 1748

Answers (1)

adrai
adrai

Reputation: 3168

What is the value of the cookie?

Does it help if you use the resolvedLanguage value instead?

<Link to={i18n.resolvedLanguage + "/about/"}>About </Link>

btw: you can remove the whitelist option, whitelist was renamed to supportedLngs

Upvotes: 1

Related Questions