URL 파라미터로 상세페이지 100개 만들기 질문

리액트 라우터 3 : URL 파라미터로 상세페이지 100개 만들기 강의 응용문제부분에

Detail.js

import {useParams} from "react-router-dom";

function Detail(props) {

let {id}= useParams();
 let itemId = props.shoes[id].id;
 return (
<div className="container">
 <div className="row">
 <div className="col-md-6">
 < img src={`https://codingapple1.github.io/shop/shoes${itemId+1}.jpg`} width="100%"/>
 </div>
 <div className="col-md-6">
 <h4 className="pt-5">{props.shoes[itemId].title}</h4>
 <p>{props.shoes[itemId].content}</p>
 <p>{props.shoes[itemId].price.toLocaleString()}</p>
 <button className="btn btn-danger">주문하기</button>
 </div>
 </div>
 </div>
 )
}

export default Detail;

이렇게 작성해도 정렬했을때 정상적으로 작동하는건가요?