리액트 라우터만들기 응용

홈에있는 제품사진을 클릭시 디테일페이지로 이동하여 해당 사진과 내용이 나오게하기위해 만드는 과정에서
내용은 잘나오는데 사진이 안나와서 id값을 찍어보니 문자형으로 나오길래 숫자형으로 변환시킨뒤 변수에 넣어 
id값에 +1증가하게 만들어서 해결했습니다 혹시 스승님께서는 어떤방법으로 하셨을까요ㅠ

 1. 메인페이지 카드 사진에 온클릭이벤트생성
function Card(props){
  let navigate = useNavigate();
  return(
    <div className='col-md-4'>
    {navigate('/detail/'+ (props.i))}} src={'https://codingapple1.github.io/shop/shoes'+ (props.i+1) +'.jpg'} width="80%"/>
    <h4>{props.shoes.title}</h4>
    <p>{props.shoes.content}</p>
    <p>{props.shoes.price}</p>
  </div>
  )
}
//////////////////////////////////////////////////////////////////////////////////////

2.사진 클릭 시 디테일에 나올 자료
function Detail(props) {

  let {id} = useParams();

  let 상품조회 = props.shoes.find(function(k){
    return k.id == id
  });
  let num = parseInt(id)+1
return (

<div className="container">
  <div className="row">
    <div className="col-md-6">
    
    
  </div>
  <div className="col-md-6">
    <h4 className="pt-5">{상품조회.title}</h4>
    <p>{상품조회.content}</p>
    <p>{상품조회.price}</p>
    <button className="btn btn-danger">주문하기</button>
  </div>
</div>
</div>
)
}