Mi aplicación es bastante grande, así que para tener un archivo de traducción más organizado quiero usar espacios de nombres nasted. Ejemplo:
{ "contract": { "index": { "pageTitle": "Contract" } }El problema con esto es cuando estoy accediendo a él. Con la ayuda de esta pregunta , descubrí que puedo acceder a las claves dentro del índice usándolo de la siguiente manera:
const { t, i18n } = useTranslation('contract', { useSuspense: false }); ... t('index.pageTitle') El problema es que parece bastante innecesario prefijar index. a cada tecla a la que quiero acceder. Lo que me gustaría hacer es importar el índice del espacio de nombres en lugar del contrato y usarlo de la siguiente manera:
const { t, i18n } = useTranslation('contract:index', { useSuspense: false }); ... t('pageTitle') Que no funciona. Probé contract.index también. En la documentación oficial no encontré nada sobre anidar. ¿Es posible lograr lo que estoy tratando de hacer o tendré que seguir prexificando cada clave?
Los espacios de nombres anidados no son compatibles .
Puede decorar el useTranslation para proporcionar esta funcionalidad ampliada para las páginas del espacio de nombres.
import { useTranslation as useTranslationBase } from "react-i18next"; const useTranslation = (ns, page, props={}) => { const trans = useTranslationBase(ns, props); return { ...trans, t: (keys, options) => { let _keys = keys; if (!Array.isArray(keys)) _keys = [String(keys)]; _keys = _keys.map(key =>`${page}.${key}`) return trans.t(_keys, options) } } }Uso
export default function () { const { t } = useTranslation('contract', 'index'); return <div>{t(["pageTitle"])}-{t("pageTitle")}</div> }