React and i18n how to translate by adding the locale in the URL

Question

Need some help. I'm kinda stuck with the translation process. Trying to translate my page into Arabic, English and Spanish. The translations is working. The default languages is "English". When the language is switched the URL should contain locale based on the translated language. URLS should be rewritten with /en , /es or /ar.

As it is said in the i18n documentation , already created files in the public with the name locales which contain the whole translations needed.Then i18n file is created.The code is following

import i18n from "i18next"; 

import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const languages = ["en",  "es", "ar"]




const options = {

    order: ['localStorage', 'querystring',  'navigator',],


    lookupQuerystring: 'lng',
    lookupCookie: 'i18next',
    lookupLocalStorage: 'i18nextLng',
    lookupSessionStorage: 'i18nextLng',
    lookupFromPathIndex: 0,
    lookupFromSubdomainIndex: 0,

    caches: [ 'localStorage', 'cookie', ],
    excludeCacheFor: ['cimode'],


    cookieMinutes: 10,
    cookieDomain: 'myDomain',

    htmlTag: document.documentElement,


    cookieOptions: { path: '/', sameSite: 'strict' }
}


i18n

    .use(Backend)

    .use(LanguageDetector)


    .use(initReactI18next)

    .init({
    
    
    
        fallbackLng: "ar",
        lng: 'en',
        debug: true,
        whitelist: languages,
        checkWhitelist: true ,
        detection: options,

        interpolation: {
            escapeValue: false,
        }
    });


export default i18n;

In the Router.js File

<Route
        exact
        path="/services/edit/:lng"
        render={(routeProps) => {
          return (
            <MainLayout   >
              <ServicesEdit {...routeProps} isEdit />
            </MainLayout>
          );
        }}
      />
   

in The MenuContent.jsx file

<Menu.Item key="2" icon={<UserOutlined />}>
        <Link to={`/services/edit/${lng}`}>{props.t("SERVICES_EDIT_PAGE")}</Link>
 </Menu.Item>

The DropDownMenu.jsx.The handleClick function passed via props is

  let handleClick = (lng) => {

    i18n.changeLanguage(lng)

  }

 <Menu>
            <Menu.Item>
                <a onClick={() => props.handleClick("en")} >
                    <div>
                        <span className="flag-icon flag-icon-us"></span>
                        English
                    </div>
                </a>
            </Menu.Item>
            <Menu.Item >
                <a onClick={() => props.handleClick("es")} >
                    <div>

                        <span className="flag-icon flag-icon-es"></span>

                        Spanish
                    </div>
                </a>
            </Menu.Item>
            
            <Menu.Item>
                <a onClick={() => props.handleClick("ar")} >

                    <div>

                        <span className="flag-icon flag-icon-ae"></span>

                        العربية
                   </div>

                </a>
            </Menu.Item>
        </Menu>

Answer 1

You can use i18n.language to get the current set language. For the language changer you can either use onLanguageChanged api here in the docs or you can check my answer here to write a function for manipulating the url.