Блог

Нужна помощь. Я вроде как застрял в процессе перевода. Я пытаюсь перевести свою страницу на арабский, английский и испанский языки. Переводы работают. Языки по умолчанию — «английский». При переключении языка URL-адрес должен содержать языковой стандарт, основанный на переведенном языке. URL-адреса должны быть переписаны с помощью /en , /es или /ar.

Как сказано в документации i18n, уже созданы общедоступные файлы с именами локализаций, которые содержат все необходимые переводы.Затем создается файл i18n.

Это мой код:

 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;
 

В Router.js Файл

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

в файле MenuContent.jsx

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

Выпадающее меню.jsx.Функция handleClick, передаваемая через реквизит, является

   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>
 

Когда речь /en идет о , /es и /fr , вы на самом деле говорите о path . Однако path обнаружение не настроено в настройках вашего языкового детектора.

Измените конфигурацию следующим образом:

 // add 'path' to the order Array
order: ['localStorage', 'querystring',  'navigator', 'path'],

// change 'lookupFromPathIndex' to -1 so the last element is used
lookupFromPathIndex: -1,
 

Редактировать:

Похоже, ты не можешь настроиться lookupFromPathIndex на -1 это . Это использует простой поиск по массиву и даст undefined результат . Если вы действительно хотите использовать индекс последнего пути для локали, вам придется добавить пользовательский детектор.

Добавьте следующий пользовательский детектор:

src/i18n/customPath.js

 export default {
  name: 'customPath',

  lookup() {
    let found;
    if (typeof window !== 'undefined') {
      const language = window.location.pathname.match(//([a-zA-Z-]*)/g);
      if (language instanceof Array amp;amp; language.length) {
        found = language[language.length - 1].replace('/', '');
      }
    }
    return found;
  },
};
 

Зарегистрируйте детектор:

 import customPath from './customPath.js';

const languageDetector = new LanguageDetector();

languageDetector.addDetector(customPath);

const options = {
    order: ['customPath', 'localStorage', 'querystring',  'navigator'],
    // reset of options
};

i18n
    .use(Backend)
    .use(languageDetector) // <-- point to the variable