我通过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 访问旅游详细信息页面
使用此格式发送路径:/tours/:id/