react-i18next单复数问题：中文环境始终返回复数形式

问题分析 #

使用react-i18next时，英文单复数显示正常，但中文环境下无论数值为单数还是复数，始终返回复数形式。核心原因是中文复数语法规则与英文存在差异，i18next默认的复数判断逻辑需要针对性配置才能适配中文场景。

解决步骤 #

1. 确保intl-pluralrules正确引入

intl-pluralrules用于补充浏览器对非英文复数规则的支持，需在i18n初始化前导入：

import 'intl-pluralrules';

确认依赖包已正确安装（当前版本1.3.1兼容），避免因缺失导致复数判断失效。

2. 调整中文翻译文件结构

i18next中中文的复数规则默认定义为：1对应one，其他数值对应other。需将中文翻译文件修改为符合该规则的结构：

{
  "item": {
    "one": "{{count}} 个项目",
    "other": "{{count}} 个项目"
  }
}

若不需要区分单复数内容，可将one和other的翻译文本设置为一致，确保i18next能根据数值匹配对应键值。

3. 自定义i18next中文复数规则

在i18n初始化配置中，手动指定中文的复数判断逻辑，确保数值为1时正确匹配单数键：

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    ns: ["common"],
    defaultNS: "common",
    resources,
    fallbackNS: "en",
    supportedLngs: ["en", "zh"],
    interpolation: {
      escapeValue: false
    },
    react: {
      bindI18n: "loaded languageChanged"
    },
    returnEmptyString: false,
    nsSeparator: false,
    // 自定义中文复数规则
    pluralRules: {
      zh: (n) => n === 1 ? 'one' : 'other'
    }
  });

4. 检查翻译调用方式

确保组件中调用翻译函数时正确传递count参数：

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation('common');
  return <div>{t('item', { count: 1 })}</div>;
}

调用时的键名需与翻译文件中的复数结构一致，避免因键名不匹配导致错误。

内容的提问来源于stack exchange，提问作者LiHao