react-router-dom URL parameter

URL parameter

react-router-dom URL parameter를 이용하면 URL에 입력한 파라미터 값을 가져올 수 있다.

 

 

상품페이지 3개를 만든다고 생각해보자.

아래와 같이 Route를 3개 만드는 방법을 쓸 수 있다. 하지만 상품이 100만개라면..?

<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 parameter 문법을 사용하자! 링크걸기

페이지를 여러개 만들고 싶으면 URL parameter 문법을 사용할 수 있다.

path 작명할 때  /:작명 이렇게 사용하면 /detail/작명 으로 접속했을때 해당 컴포넌트를 보여준다.

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

 

 

URL parameter 가져오기

(참고)

path 작명시 url 파라미터는 몇번이고 사용가능합니다. detail/:어쩌구/:저쩌구 가능

// 주소/detail/3 으로 접속한 경우

import { useParams } from 'react-router-dom'

function Detail(){
    let {id} = useParams();
    console.log(id);  // 3
}

 

 

?