[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}/> }/>

-> 이런식으로 만들면, 100개가 있다면 100개의 라우트를 만들어야 하지만,

 

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

-> URL 파라미터 문법을 이용하면 한줄로 해결 가능하다.

-> "/:변수명" 입력했을 때 <Detail/> 컴포넌트를 보여줘라 라는 뜻이다.

 

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

function Detail(){
  let {id} = useParams();
  console.log(id)
  
  return (
    <div className="container>
      <div className="row">
     
      </div>
    </div>
  )
}

-> useParams()라는 함수를 import 한 후 console.log(id)를 찍어보면 위 "/:변수명"에 입력한 값을 가져올 수 있다. 

-> /detail/1로 접속하면 id는 1,  /detail/2로 접속하면 id는 2로 찍힌다.