如何在react-i18next的useTranslation Hook中缩短翻译路径？

你之前的尝试无效，因为useTranslation的参数是命名空间（对应翻译文件的顶级键或独立翻译文件），而非翻译对象的嵌套路径，所以直接传root.chapter不会生效。

下面是两种可行的实现方式：

方式一：封装自定义Hook预设前缀 #

如果不想修改现有翻译文件结构，推荐封装一个自定义Hook来预设键的前缀：

import { useTranslation } from 'react-i18next';

// 自定义Hook，预设root.chapter为前缀
export const useChapterTranslation = () => {
  const { t, ...rest } = useTranslation();
  // 封装t函数，自动拼接前缀
  const chapterT = (key, options) => t(`root.chapter.${key}`, options);
  return { t: chapterT, ...rest };
};

// 组件中使用
const { t } = useChapterTranslation();
const text = t('key'); // 等价于原t('root.chapter.key')

方式二：调整翻译文件为命名空间结构 #

如果允许修改翻译文件，可以将嵌套的root.chapter提取为独立的顶级命名空间：

修改翻译文件（如en.json）：

{
  "rootChapter": {
    "key": "Some text"
  }
}

然后直接通过命名空间调用：

const { t } = useTranslation('rootChapter');
const text = t('key'); // 直接访问rootChapter下的key

额外技巧：使用t函数的keyPrefix选项 #

react-i18next v11+支持直接给t函数传keyPrefix参数，适合单次调用的场景：

const { t } = useTranslation();
const text = t('key', { keyPrefix: 'root.chapter' });

内容的提问来源于stack exchange，提问作者dmytro.shch