0
263
Vistascómo incorporar datos API en i18next en lugar de un archivo estático
Guardé el archivo en public folder en reaccionar para diferentes language para la translation . ahora tengo el requisito de obtener esos datos de la API . Puedo llamar a la API y obtener datos. También sé cómo usar la translation . pero no puedo incorporar la llamada API en el archivo de código de traducción.
API.
axios .get( 'http://localhost:8080/file_download/' + navigator.lnaguage ) .then((res) => { console.log(res.data); }); }); } A continuación se muestra mi código de traducción de archivos estáticos. por ejemplo, en TRANSLATIONS_FR necesito almacenar la salida de la API .
i18file.js: -
import i18next from 'i18next'; const LanguageDetector = require('i18next-browser-languagedetector'); const initReactI18next = require('react-i18next'); import xios from 'axios'; import { TRANSLATIONS_FR } from './../public/locales/fr/fr.js'; import { TRANSLATIONS_EN } from '../public/locales/en/en.js'; i18next .use(LanguageDetector) .use(initReactI18next) .init({ resources: { en: TRANSLATIONS_EN, fr: TRANSLATIONS_FR, }, fallbackLng: 'fr', }); i18next.changeLanguage(navigator.language); export default i18next; Tengo que insertar ese código API en el archivo i18file.js . si browser detecta en entonces tengo que llamar a english y asignar resources . si el navegador detecta frech, entonces tengo que hacer lo mismo.
¿Podría por favor sugerir? Voy a escribir el código.
Edit1: - Estoy escribiendo debajo del code y arroja error . A continuación, la API enviará los json data desde la base de database . estos datos no los estoy not storing in file sino directamente usando.
http://localhost:8080//file_download/en Below is the code import i18next from 'i18next'; import Backend from 'i18next-http-backend'; const LanguageDetector = require('i18next-browser-languagedetector'); const initReactI18next = require('react-i18next'); i18next .use(Backend) .use(LanguageDetector) .use(initReactI18next) .init({ backend: { loadPath: 'http://localhost:8080//file_download/en' //this is API path which will return result. }, resources: { en:res.data //I need to assign here. }, fallbackLng: 'fr', }); i18next.changeLanguage(navigator.language); export default i18next; ¿Cómo puedo incorporar la API en el code anterior y usar sus data por ejemplo, en idioma?
3 Respuestas
Responde la pregunta0
Actualizado En await en el nivel superior no es compatible
Sugeriría usar otro complemento i18next-http-backend como i18next ha mencionado aquí
Primero debe instalar el complemento npm i i18next-http-backend
Luego simplemente defina el backend. Hay algunos ejemplos aquí
// import { TRANSLATIONS_FR } from './../public/locales/fr/fr.js'; // import { TRANSLATIONS_EN } from '../public/locales/en/en.js'; import Backend from 'i18next-http-backend'; i18next .use(Backend) .use(LanguageDetector) .use(initReactI18next) .init({ backend: { loadPath: 'http://localhost:8080/file_download/{{lng}}/{{ns}}.json' }, // your backend options. // More info here: https://github.com/i18next/i18next-http-backend resources: { en, fr }, fallbackLng: 'fr', }); i18next.changeLanguage(navigator.language); export default i18next;0
no necesita escribir http://localhost:8080 como prefijo de su URL de obtención. solo un / se refiere a la carpeta pública. simplemente cambie su URL de axios en el archivo API a:
axios .get( '/file_download' + navigator.lnaguage ) + '.json' // or any other format that your language file is .then((res) => { console.log(res.data); }); }); }0
Hay un gran artículo que explica exactamente cómo adaptar su código para cargar las traducciones a través de API aquí: https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb#separate
Presenta el módulo i18next-http-backend , le muestra dónde colocar los archivos de traducción: 
y cómo adaptar el código:
import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import Backend from 'i18next-http-backend'; i18n // i18next-http-backend // loads translations from your server // https://github.com/i18next/i18next-http-backend .use(Backend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // pass the i18n instance to react-i18next. .use(initReactI18next) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: true, fallbackLng: 'en', interpolation: { escapeValue: false // not needed for react as it escapes by default } }); export default i18n;El ejemplo completo se puede encontrar aquí .
—-
Alternativamente, también puede cargar de forma diferida las traducciones de esta manera: https://github.com/i18next/i18next-resources-to-backend#you-can-also-lazy-load-the-in-memory-translations-ie- al-usar-webpack
por cierto: i18next-http-backend también puede inyectar una función de solicitud personalizada:https://github.com/i18next/i18next-http-backend#backend-options 
como aquí: https://github.com/i18next/i18next-http-backend/issues/34#issuecomment-729908814