1

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>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
  • Do you ever update your language "lng" in MenuContent.jsx? By just changing the language for the language package you dont't update your link url afaik. You need to use some sort of custom onLanguageChange event and eventhandler (or maybe i18next does provide this eventhandler?) to update your lng in MenuContent. – NickG Sep 15 '21 at 08:47
  • In the UseEffect called lng and saved it in the state.Then putted it under dependency.When the lng changes the path also should change. –  Sep 15 '21 at 08:55

1 Answers1

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.

kingofsevens
  • 515
  • 3
  • 9