0
186
Vistasllamando a la API en lugar de la ruta del archivo en la aplicación de reacción para la traducción
Tengo el siguiente código para la traducción en la aplicación de reacción.
import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import HttpApi from "i18next-http-backend"; i18n .use(initReactI18next) .use(HttpApi) .init({ lng: "en", fallbackLng: "en", keySeparator: false, interpolation: { escapeValue: false, /** * Add interpolation format method to customize the formatting */ format: (value, format, lng) => { if (format === "uppercase") { return value.toUpperCase(); } return value; } }, backend: { loadPath: "/locales/{{ns}}/{{lng}}.json" } }); Aquí, en el código anterior, los datos se guardan en file estático en la carpeta locale . Necesito leer los datos de la backend API en lugar de los archivos. Me refiero al siguiente código en lugar de loadPath. Necesito llamar a la API. es posible en react ?
backend:{ loadPath: "/locales/{{ns}}/{{lng}}.json" }
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Esta respuesta puede ayudar: cómo incorporar datos API en i18next en lugar de un archivo estático
i18next-http-backend también puede aceptar una función de solicitud inyectada:https://github.com/i18next/i18next-http-backend#backend-options 
·
Juan Pablo Isaza
Denunciar
0
El siguiente código está funcionando para mí.
import i18n from "i18next"; import LanguageDetector from "i18next-browser-languagedetector"; import backend from 'i18next-http-backend'; import api from "../api"; alert(navigator.language); var lang=navigator.language; if(lang==='en-US') lang='en'; let loadResources= api.getTranslations(lang); const backendOptions = { loadPath: 'http://localhost:8080/country/'+lang, request: (options, url, payload, callback) => { try { loadResources.then((result) => { callback(null, { data: result, status: 200, }); }); } catch (e) { console.error(e); callback(null, { status: 500, }); } }, }; i18n .use(LanguageDetector) .use(backend) .init({ backend: backendOptions, fallbackLng: "fr", debug: false, load:"languageOnly", ns: ["translations"], defaultNS: "translations", keySeparator: false, interpolation: { escapeValue: false, formatSeparator: "," }, react: { wait: true } }); i18n.changeLanguage(navigator.language); export default i18n;
·
Juan Pablo Isaza
Denunciar
Responde la pregunta