如何在I18Next中返回含NavLink的JSX对象？

你的问题根源在于i18next默认会将传入的对象转换为字符串，导致显示[object Object]。要在翻译字符串中渲染React组件，有两种可行方案：

方案一：使用react-i18next的Trans组件（推荐） #

Trans组件专门用于处理包含React元素的翻译内容，可读性和可维护性更强。

步骤1：调整翻译JSON #

将checkbox1字段改为带命名标签的格式：

"checkbox1": "I agree with <termsOfUseLink>{{termsOfUse}}</termsOfUseLink> and <howItWorksLink>{{howItWorks}}</howItWorksLink> and <privacyPolicyLink>{{privacyPolicy}}</privacyPolicyLink>",
"checkbox1-links": {
  "termsOfUse": "Terms of Use",
  "howItWorks": "How it works",
  "privacyPolicy": "Privacy Policy"
}

步骤2：使用Trans组件替换t函数调用 #

导入Trans组件后，在JSX中使用以下代码：

import { Trans } from 'react-i18next';

// ...

<Trans
  i18nKey="exchange.checkbox1"
  values={{
    termsOfUse: t("exchange.checkbox1-links.termsOfUse"),
    howItWorks: t("exchange.checkbox1-links.howItWorks"),
    privacyPolicy: t("exchange.checkbox1-links.privacyPolicy")
  }}
  components={{
    termsOfUseLink: <NavLink to="/terms-of-use" target="_blank" />,
    howItWorksLink: <NavLink to="/how-its-work" target="_blank" />,
    privacyPolicyLink: <NavLink to="/privacy-policy" target="_blank" />
  }}
/>

方案二：配置i18next支持React组件插值 #

如果你想继续使用t函数，可以通过修改i18next的初始化配置来启用React组件插值：

步骤1：修改i18next初始化代码 #

在i18next的初始化文件中添加interpolation.react配置：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    // 其他配置（如语言资源、默认语言等）
    interpolation: {
      react: true, // 启用React组件插值
      escapeValue: false, // React环境下无需转义
    },
  });

步骤2：保留原有t函数调用 #

此时你原来的代码就能正常渲染NavLink组件了：

// 定义NavLink变量的代码不变

// 在return中
{t("exchange.checkbox1", {
  returnObjects: true,
  termsOfUseLink: termsOfUseLink,
  howItWorksLink: howItWorksLink,
  privacyPolicyLink: privacyPolicyLink,
})}

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