React组件中${id}未渲染为实际ID值的问题排查与解决咨询

问题出在你使用单引号包裹URL字符串，导致模板语法${id}没有被解析成实际的id值，而是被当作普通文本处理，最终URL里出现了转义后的$%7Bid%7D（{}被URL编码）。

解决办法： #

把Link组件to属性里的单引号替换成反引号（`），使用ES6模板字符串语法嵌入变量：

修改两处Link的代码：

// 标题部分的Link
<h5 className="tour__title">
  <Link to={`/tours/${id}`}>{title}</Link>
</h5> 

// 按钮部分的Link
<button className='btn booking__btn'>
  <Link to={`/tours/${id}`}>Book Now</Link>
</button>

原理说明： #

• 单引号'或双引号"包裹的是普通字符串，里面的${id}会被原样输出；
• 反引号`包裹的是模板字符串，支持在其中通过${变量}嵌入动态值，React会正确解析变量并生成包含实际id的URL。

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