I wanted to organize better the language translation files of my project having to nest objects in the language file.
- Without nesting everything works fine
- Even nesting objects I can access them by passing the attribute directory in the t() function (ie: t(‘section.subsection.text’)
- Documentation’s solution doesn’t work for me and I don’t know why
I already tried printing the useTranslation instance to see if it was receiving the “keyPrefix” value but it always says ‘undefined’ either on the t or the fixedT function.
lang file is like this:
JavaScript
x
8
1
export const en = {
2
section:{
3
subsection:{
4
text:'my text',
5
}
6
}
7
}
8
the file where I use the useTranslation hook:
JavaScript
1
4
1
const { t } = useTranslation('section', { keyPrefix: 'subsection' });
2
3
<h1>{t('text')}</h1>
4
this is taken from the documentation
JavaScript
1
16
16
1
// having resources like this:
2
/*{
3
"translation": {
4
"very": {
5
"deeply": {
6
"nested": {
7
"key": "here"
8
}
9
}
10
}
11
}
12
}*/
13
// you can define a keyPrefix to be used for the resulting t function
14
const { t } = useTranslation('translation', { keyPrefix: 'very.deeply.nested' });
15
const text = t('key'); // "here"
16
Advertisement
Answer
I had an old node.js version.
Update it (nvm is a great tool for this) and voilà