Necesito agregar idioma a la URL, es decir, así es como se ve la URL ahora http://localhost:3000/, http://localhost:3000/noticias, pero debe ser así http://localhost:3000/en , http://localhost:3000/en/noticias.
Al mismo tiempo, cuando alguien envía un enlace a este sitio, se debe tomar el idioma del enlace. Aquí está mi código. Los idiomas funcionan, cambia al hacer clic.
import i18n from 'i18next' import HttpApi from 'i18next-http-backend' import LanguageDetector from 'i18next-browser-languagedetector' import { initReactI18next } from 'react-i18next' i18n .use(LanguageDetector) .use(initReactI18next) .use(HttpApi) .init({ supportedLngs: ['ru', 'en', 'kk'], fallbackLng: "en", detection: { order: ["cookie", "localStorage", "htmlTag", "path", "subdomain"], caches: ["cookie"], }, interpolation: { escapeValue: false } }); export default i18n;Pero, ¿cómo agregar a la URL automáticamente? ¿Existen soluciones preparadas para esto?
es posible obtener los parámetros de la URL con la ayuda del gancho useParams() disponible en react-routerv5.
Al definir la URL, debe agregar un param value de parámetro como este: <Route path="/:lang/news" component={News} /> donde :lang es el valor que recibirá de la URL.
Digamos que alguien ingresa yourapp.com/en/news , aquí el parámetro lang se cargará con el valor en . Entonces, ahora para extraer este valor, puede usar import { useParams } from "react-router-dom"; y luego dentro del componente de la función (ya que los ganchos funcionan solo dentro de los componentes funcionales): const { lang } = useParams(); donde lang es tu parámetro.
Después de esto, puede usar i18n para traducir según el idioma recibido.