产品延迟信息未在React js中显示

Question

我通过id链接了一个页面，但是它不

t seems to appear that means it can

读取通过useparams传递的id，代码中的问题是什么？有人可以帮助我吗？

这是通过id调用个人详细信息的代码

const TourDetails = () => {

   const {id} = useParams();
   const reviewMsgRef = useRef('')
   const [tourRating, setTourRating]=useState(null)

   const tour = tourData.find(tour=>tour.id === id);

   const { photo, title, desc, price, address, reviews, city, distance, maxGroupSize } = tour;

   const {totalRating, avgRating}= calculateAvgRating(reviews);

   //formate date

   const options = {day:'numeric', month:'long', year:"numeric"};

   //submit rqst to the server

   const submitHandler = e=>{

    e.preventDefault()
    const reviewText = reviewMsgRef.current.value;
 
    alert('${reviewText}, ${tourRating}');
    // later will call api

   }

  return (
    <>
      <section>
        <Container>
          <Row>
            <Col lg="8">
              <div className="tour__content">
                <img src={photo} alt="" />

                <div className="tour__info">
                  <h2>{title}</h2>

                  <div className="d-flex align-items-center gap-5">
                  <span className="tour__rating d-flex align-items-center gap-1">
            <i class="ri-star-fill" style={{'color':"var(--secondary-color)"}}></i> {avgRating === 0? null: avgRating} 
            {totalRating === 0? 'Not Rated' : <span>({reviews.length})</span>}
            
        </span>

        <span>
          <i class="ri-map-pin-user-fill"></i> {address}
        </span>
                  </div>

                  <div className="tour__extra-details">
                    <span><i class="ri-map-pin-2-line"></i>{city}</span>
                    <span><i class="ri-money-dollar-circle-line"></i>${price}/ per person</span>
                    <span><i class="ri-map-pin-time-line"></i>{distance} k/m  </span>
                    <span><i class="ri-group-line"></i>{maxGroupSize} people</span>
  
                  </div>
                  <h5>Description</h5>
                  <p>{desc}</p>
                </div>

                {/* tour review section*/}
                <div className="tour__reviews mt-4">
                  <h4>Reviews ({reviews?.length} reviews)</h4>
            
                <Form onSubmit={submitHandler}>
                  <div className="d-flex align-items-center gap-3 mb-4 rating__group"> 
                  
                  <span onClick={()=>setTourRating(1)}>1<i class="ri-star-s-fill"></i></span>
                  <span onClick={()=>setTourRating(2)}>2<i class="ri-star-s-fill"></i></span>
                  <span onClick={()=>setTourRating(3)}> 3<i class="ri-star-s-fill"></i></span>
                  <span onClick={()=>setTourRating(4)}>4<i class="ri-star-s-fill"></i></span>
                  <span onClick={()=>setTourRating(5)}>5<i class="ri-star-s-fill"></i></span>
                  
                  </div>

                  <div className="review__input">
                    <input type="text" ref={reviewMsgRef} placeholder="share your thoughts" required/>
                    <button className="btn primary__btn text-white" type="submit">Submit</button>
                  </div>
                </Form>
                <ListGroup className="user__reviews">
                 
                 {
                  reviews?.map(reviews=>(
                    <div className="review__item">
                      <img src={avatar} alt=""/>

                      <div className="w-100">
                        <div className="d-flex align-items-center justify-content-between">
                          <div>
                            <h5>Muhib</h5>
                            <p>{new Date('01-18-2024').toLocaleDateString("en-US", options )}</p>
                          </div>
                          <span className="d-flex align-items-center">
                            5<i class="ri-star-s-fill"></i>
                          </span>
                        </div>
                        <h6>Amazing Tour</h6>
                      </div>
                    </div>
                  ))
                 }

                </ListGroup>
                </div>
              </div>
            </Col>
            <col lg='4'>
              <Booking tour={tour} avgRating={avgRating}/>
            </col>
          </Row>
        </Container>
      </section>
      <Newsletter />
    </>
  );
};

export default TourDetails;

这是链接到单个页面的代码

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;

用它来链接产品详细信息，但是当我浏览此链接时，它显示空白

{标题}

我期待着，我可以根据他们的旅游 ID 访问旅游详细信息页面

Answer 1

使用此格式发送路径：/tours/:id/