ReactJS中如何在插值字符串插入变量生成动态Link链接

你之前的两种写法都存在语法错误，以下是正确的实现方式：

错误原因分析 #

• 第一种写法：把模板字符串嵌套在了单引号内，导致模板语法${itemId}被当作普通字符串解析，没有触发变量插值。
• 第二种写法：将对象结构写成了字符串，然后试图把字符串作为对象传入to属性，这不符合React Router的参数要求，to需要接收一个对象而非字符串。

正确写法 #

写法1：直接使用模板字符串拼接搜索参数 #

直接用反引号包裹search的取值，正确插入变量：

<td><Link to={{pathname: '/select_item', search: `?item_id=${itemId}`}}>Select</Link></td>

写法2：提前构建完整的路径对象 #

先创建符合要求的对象，再传入to属性：

const linkProps = {
  pathname: '/approve_item1',
  search: `?walk_id=${item.id}`
};
<td><Link to={linkProps}>Select</Link></td>

写法3：使用URLSearchParams构建参数（推荐） #

如果参数较多或需要处理编码问题，使用URLSearchParams更规范：

const searchParams = new URLSearchParams();
searchParams.set('item_id', itemId);

<td><Link to={{pathname: '/select_item', search: searchParams.toString()}}>Select</Link></td>

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