i18next dealing with multiple translation files nested namespaces

Solution 1:

If you're using useTranslation like that:

const { t } = useTranslation('manager.dashboard');

Your filename should be like this /public/locales/en/manager.dashboard.json

btw. when lazy loading make sure you use Suspense or check for the ready flag: https://react.i18next.com/latest/usetranslation-hook#not-using-suspense

You may also check out this page, regarding multiple translation files: https://react.i18next.com/guides/multiple-translation-files

edit: Alternatively, you can try with this:

const { t } = useTranslation('manager/dashboard');

like here: https://codesandbox.io/s/react-i18next-http-example-forked-2ptmu?file=/src/app.js:153-162