0

我在弄清楚如何使用 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文件中则有效）

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

4

1 回答 1

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

于 2022-01-19T10:33:51.493 回答