
// 기존 방식
<Route path="/detail" element={<Detail />} />
<Route path="/detail/0" element={<Detail />} />
<Route path="/detail/1" element={<Detail />} />
// URL 파라미터 이용 ( /:id)
<Route path="/detail/:id" element={<Detail />} />
이렇게 진행하게 되면 어떤 숫자의 페이지를 들어가도 Detail페이지만 보이게 된다
여기서의 방법은 Detail페이지에 가서 clothes[0], data[0] 이런식으로 고정된 값을 변화되는 값으로 바꿔주면 된다
clothes[_]안에 들어갈 숫자는 Route 코드안에서 :id자리에 들어갈 숫자랑 같은 내용을 입력하면 된다
그럼 어떻게 가져와?
useParams()를 사용하면 된다
-> 현재 URL의 파라미터 정보들이 남는다
예) www.ajdklf.com/detail/1 이렇게 있으면 1이 useParams에 남는다
만약 url에 이상한 파라미터를 작성한다면?
유저가 작성하는 것을 막을 수는 없으니 if문을 사용하여 제한을 둔다
즉, id값이 이상하면 상품이 없다는 UI를 보여주기