Hice un proyecto React en el que estoy usando i18n para la localización. La traducción funciona como debería, aquí hay un ejemplo.

 import React, { Suspense } from "react"; import i18n from "i18next"; import { initReactI18next, useTranslation } from "react-i18next"; const translationSwe = { about: "Information" } const translationEng = { about: "About" } i18n.use(initReactI18next).init({ resources: { swe: { translation: translationSwe }, eng: { translation: translationEng }, }, lng: "swe", fallbackLng: "swe", interpolation: { escapeValue: false }, }); const App = () => { const { t } = useTranslation(); return( <Suspense fallback="Loading.."> <div className="app"> <p>{t("about")}</p> </div> </Suspense> ); };

Me preguntaba, ¿hay alguna manera de agregar texto traducido sin obtenerlo de translationSwe & translatioEng? Esto no funciona, por supuesto, pero algo como esto estaba en mi mente:

 <p>{t(swe: "Information", eng: "About")}</p>

Espero que te hagas una idea, ¡pregunta si no!