React结合i18n按语言切换组件时match属性不存在报错如何解决

错误原因 #

useTranslation() 是react-i18next提供的Hook，其返回值本身没有内置match方法，你调用的这个API不属于官方提供的能力，因此会抛出类型不存在的报错。同时你之前的写法没有正确解构出i18n实例，直接将Hook返回的包含t函数和i18n实例的对象赋值给了i18n变量，也是错误写法。

修复方案 #

直接读取i18n实例的language属性拿到当前语言，自行实现匹配逻辑即可，完全适配你不想用翻译Key、要独立维护不同语言组件的需求：

export const Preparation = () => {
  // 正确解构出i18n实例
  const { i18n } = useTranslation()
  // 取当前语言，若你的语言带地区后缀如de-DE，可加.slice(0,2)只取前两位编码
  const currentLocale = i18n.language
  // 实现匹配逻辑，匹配到目标语言返回对应编码，否则走英文兜底
  const targetLocale = ["de", "fr", "it"].includes(currentLocale) ? currentLocale : "en"

  switch (targetLocale) {
    case "de":
      return <PreparationGerman />
    case "fr":
      return <PreparationFrench />
    case "it":
      return <PreparationItalian />
    default:
      return <PreparationEnglish />
  }
}

const PreparationGerman = () => (
    <h1>German</h1>
)

const PreparationFrench = () => (
    <h1>French</h1>
)

const PreparationItalian = () => (
    <h1>Italian</h1>
)

const PreparationEnglish = () => (
    <h1>English</h1>
)

上述写法不会影响你在各个语言独立组件内做任意文本格式化、结构调整的操作，灵活性比统一用翻译Key的方案更高。

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