Hola, no puedo cambiar la ruta href (URL) después de seleccionar un nuevo idioma
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;Tengo ejemplo.com/undefined/page1
Usé esta forma de importar la ruta del idioma al Href
export const baseUrl = i18n.language === 'en' ? '' : '/' + i18n.language; y el enlace <a>home</a>
<a className='item' href={baseUrl + '/'} > Home </a>Hemos creado un componente LanguageChanger . Una función handleClick determina la URL y las actualizaciones como ha indicado, pero on LanguageChanged no proporciona la misma flexibilidad.
He incluido dos versiones de newUrl . Primero, en no está presente en la url. En segundo lugar, si languageCode está presente en la 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); } };