为什么$%7Bid%7D一直显示并说id已赋值但从未使用过

Question

在此代码中，我的 id 未显示已分配。 当我点击查看旅游详情时，我得到的是

$%7Bid%7D

而不是 id。如何修复它？由于 id 不是从这里分配的，所以它没有显示任何这些

const TourCard = ({tour}) => {

  const{id, title, city, photo, price, featured, reviews } = tour;
   
   const{totalRating, avgRating}= calculateAvgRating(reviews);

  return (
    <div className="tour__card">
      <Card>
        <div className="tour__img">
            <img src={photo} alt="tour-img"/>
            {featured && <span>Featured</span>}
        </div>
      </Card>

        <CardBody>
        <div className="card__top d-flex align-items-center justify-content-between">
        <span className="tour__location d-flex align-items-center gap-1">
            <i class="ri-map-pin-line"></i> {city}
        </span>
        <span className="tour__rating d-flex align-items-center gap-1">
            <i class="ri-star-fill"></i> {avgRating === 0? null: avgRating} 
            {totalRating === 0? ( 'Not Rated' ): <span>({reviews.length})</span>}
            
        </span>
        </div>

        <h5 className="tour__title">
          <Link to = {'/tours/${id}'}>{title}</Link>
          </h5> 

        <div className="card__bottom d-flex align-items-center justify-content-between mt-3">
            <h5>${price}<span>/ per person</span></h5>
            
            <button className='btn booking__btn'>
                <Link to = {'/tours/${id}'}>Book Now</Link>
            </button>

        </div>
      </CardBody>
     
     
    </div>
  );
};

export default TourCard;

const{id, title, city, photo, price, featured, reviews } = tour;

 <h5 className="tour__title">
          <Link to = {'/tours/${id}'}>{title}</Link>
 </h5> 

<button className='btn booking__btn'>
<Link to = {'/tours/${id}'}>Book Now</Link>
</button>

Answer 1

<Link to = {'/tours/${id}'}>{title}</Link>

外大括号中的表达式

{'/tours/${id}'}

是一个普通的 JavaScript 表达式，使用单引号（如

'

）不允许替换

${id}

。如果更改为反引号 (

`

)，则 JavaScript 会将其视为模板字符串，并根据需要替换 ID。

<Link to = {`/tours/${id}`}>{title}</Link>

请记住，模板字符串和 JSX 大括号可能看起来相似，但实际上是在不同时间通过不同进程进行处理的。

${

是模板文字的良好信号，并且仅出现在反引号 (

`

) 内。