React + i18next: Why aren't my nested keys working?
while the answer to use "welcome.name" etc is a valid usage, for my use case, I actually needed to use structured keys so that I can better structure my translations.
What made the nested values work for me was removing the keySeparator: false from the i18n.init function.
Code would be:
i18n.use(initReactI18next).init({ resources: { en: {translation: EN}, fr: {translation: FR}, }, lng: 'en', fallbackLng: 'en', // keySeparator: false, // this was the line that I've had to remove to make it work interpolation: { escapeValue: false, },});and my JSON looks like:
{ "nested": { "value": "Trying a nested value" }}my HTML (div in my react component):
<div>{t("nested.value")}</div>