쇼핑몰 상세페이지

선생님께서 navigate를 이용하라고 하셔서 이렇게 했는데 이게 아닌가보네요
ㅠㅠ
 
import React from "react";
import { Col } from "react-bootstrap";
import { Routes, Route, Link, useNavigate } from "react-router-dom";
import { useParams } from "react-router-dom";
const Card = (props) => {
  let navigate = useNavigate();
  let { id } = useParams();
  console.log(id); //undefined나옴
  const onClickImg = () =>{
    navigate("/detail/:id");
  }
  return (
    <Col md={4} onClick={onClickImg}>
      < img src={"/img/" + props.product.img}></img>
      <h4>{props.product.title}</h4>
      <p>{props.product.content}</p>
      <p>{props.product.price}</p>
    </Col>
  );
};
export default Card;

주소를 입력하면 잘 나옵니다만

선생님 이렇게 하면 첫번째 상품만 상세페이지에 보이잖아요
다른 상품을 클릭하면 해당 상세페이지가 보이게 하고 싶거든요