i18next 处理多个翻译文件嵌套的命名空间

Question

我在弄清楚如何使用 i18next 延迟加载我的翻译时遇到问题。

这是我的设置：

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: NODE_ENV === 'development',
    defaultNS: 'translation',
    fallbackLng: false,
    fallbackNS: 'translation',
    keySeparator: false,
    lng: 'en',
    load: 'currentOnly',
    nsSeparator: '.'
  });

我有这样的文件夹结构：

├── src
│   └── pages
│       ├── customer
│       │   └── home.tsx
│       └── manager
│           └── dashboard.tsx

我将翻译保存在 /public/locales/en/translation.json 中，这很好用。但是，我的应用程序正在扩展，我不想将一种语言的所有翻译都保存在一个文件中。例如。 customer 不需要下载 manager 门户网站上发生的事情的所有翻译。

我的目标是专门为经理的仪表板下载翻译。

我已经尝试创建一个文件并将其添加到此位置

/public/locales/en/manager/dashboard

然后在我的 React 组件中使用以下钩子：

...
  // This probably needs to change
  const { t } = useTranslation('manager.dashboard');

  return <div>{t('Hello World')}</div>

为了测试它，我的 /public/locales/en/manager/dashboard.json（我真的想维护这个文件结构）文件中有一个键值：

{ "Hello World": "Goodbye World" }

它不工作（如果我将这个密钥添加到 /public/locales/en/translation.json 文件就可以工作）

如何更改我的配置才能使这个有组织的嵌套翻译文件结构正常工作。

Answer 1

如果您像这样使用 useTranslation：

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

你的文件名应该是这样的/public/locales/en/manager.dashboard.json

顺便说一句。延迟加载时确保使用 Suspense 或检查就绪标志：https://react.i18next.com/latest/usetranslation-hook#not-using-suspense

您也可以查看此页面，关于多个翻译文件：https://react.i18next.com/guides/multiple-translation-files

编辑：或者，你可以试试这个：

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

喜欢这里：https://codesandbox.io/s/react-i18next-http-example-forked-2ptmu?file=/src/app.js:153-162

i18next 处理多个翻译文件嵌套的命名空间

i18next dealing with multiple translation files nested namespaces

i18next

reactjs

react-i18next

i18next-http-backend