react 라우터 (url 파라미터로 상세 페이지 만들기)

상세페이지 여러개 만들려면

<Route path="/detail/0" element={ <Detail shoes={shoes}/> }/>
<Route path="/detail/1" element={ <Detail shoes={shoes}/> }/>
<Route path="/detail/2" element={ <Detail shoes={shoes}/> }/> 

이렇게도 작성할 수 있지만 귀찮으니까 url파라미터를 사용해보자~

<Route path="/detail/:id" element={ <Detail shoes={shoes}/> }/>

=> 'detail/아무 문자' 이렇게 전송됨. 이 문자를 Detail 컴포넌트에서 사용하려면

let {id} = useParams();

컴포넌트 내에서 변수에 할당해서 사용할 수 있다.