如何在react-i18next中实现可点击动态值的页面跳转？

可以通过react-i18next提供的Trans组件实现，它原生支持在翻译文本中插入React元素，是官方推荐的安全方案，具体有两种实现方式：

方式一：通过子元素匹配占位符 #

页面组件代码 #

import { Trans } from 'react-i18next';
import { Link } from 'react-router-dom'; // 基于react-router实现跳转，可替换为你项目的路由组件

// 假设已有产品/用户的ID和名称
const product_id = 'prod_001';
const user_id = 'user_001';
const product_name = '智能手表';
const user_name = '张三';

// 渲染逻辑
<Trans i18nKey="product_create">
  <Link to={`/products/${product_id}`}>{product_name}</Link>
  was created by
  <Link to={`/users/${user_id}`}>{user_name}</Link>
</Trans>

翻译JSON文件 #

{
  "product_create": "<0> was created by <1>"
}

翻译文本中的<0>会对应Trans组件的第一个子元素（产品名跳转链接），<1>对应第二个子元素（用户名跳转链接），中间的文本会正常渲染。

方式二：传递包含React元素的values参数 #

这种方式可以保留你原本的翻译文本格式：

页面组件代码 #

import { Trans } from 'react-i18next';
import { Link } from 'react-router-dom';

const product_id = 'prod_001';
const user_id = 'user_001';
const product_name = '智能手表';
const user_name = '张三';

// 渲染逻辑
<Trans 
  i18nKey="product_create"
  values={{
    product_name: <Link to={`/products/${product_id}`}>{product_name}</Link>,
    user_name: <Link to={`/users/${user_id}`}>{user_name}</Link>
  }}
/>

翻译JSON文件（无需修改） #

{
  "product_create": "{{product_name}} was created by {{user_name}}"
}

注意：不建议使用t函数+dangerouslySetInnerHTML的方式实现，这种方法会引入XSS风险，尤其是当动态值来自用户输入时。

内容的提问来源于stack exchange，提问作者Mert Kahramantürk