使用I18next-react更改URL路径

Question

你好，在选择新语言后，我无法更改href路径()

import i18n from 'i18next';
import { useTranslation, initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import I18NextHttpBackend from 'i18next-http-backend';

i18n.on('languageChanged', function (lng) {
  
  if (lng === i18n.options.fallbackLng[0]) {
    if (window.location.pathname.includes('/' + i18n.options.fallbackLng[0])) {
      const newUrl = window.location.pathname.replace(
        '/' + i18n.options.fallbackLng[0]
      );
      window.location.replace(newUrl);
    }
  }
});

i18n
  .use(I18NextHttpBackend)
  .use(LanguageDetector)
  .use(initReactI18next) 
  .init({
    fallbackLng: ['en'], 
    whitelist: ['en', 'de', 'it', 'es'],
    detection: {
      order: ['path', 'cookie', 'htmlTag', 'localStorage', 'subdomain'],
      caches: ['cookie'],
      lookupFromPathIndex: 0,
      checkWhitelist: true,
    },
    backend: {
      loadPath: '/localization/{{lng}}/translation.json',
    },
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

我得到了example.com/undefined/page1 1

我使用这种方式将语言路径导入到Href。

export const baseUrl = i18n.language === 'en' ? '' : '/' + i18n.language;

和链接<a>home</a>

 <a className='item'  href={baseUrl + '/'} >  Home </a>

Answer 1

我们已经创建了一个LanguageChanger组件。handleClick函数如您所述确定url和更新，但on LanguageChanged并没有提供相同的灵活性。

我已经包含了两个版本的newUrl。首先，en不存在于url中。第二，如果languageCode存在于url中。

  /**
   * Handles the language change
   * @param code - updated language
   * @global lang - current set language in state
   */
  let handleChange = (code) => {
    if (lang !== code) {
      // v1 - below lines since 'en' is not present in the url as your baseUrl definition
      let newUrl;
      if (lang === "en") {
        newUrl = window.location.pathname.replace(`/`, `/${code}/`);
      } else if (code === "en") {
        newUrl = window.location.pathname.replace(`/${lang}`, ``);
      } else {
        newUrl = window.location.pathname.replace(`/${lang}`, `/${code}`);
      }
      // v2 - below is the version if language is always present in the url
      // let newUrl = window.location.pathname.startsWith(`/${lang}`) ? window.location.pathname.replace(`/${lang}`, `/${code}`) : window.location.pathname.replace(`/`, `/${code}/`)
      window.location.replace(newUrl);
      localStorage.setItem("i18nextLng", code);  // this writes to the localStorage to keep the change
      setLang(code);  // this is coming from useState 
      i18n.changeLanguage(code);
    }
  };