URL 파라미터 문법

만약, 페이지를 여러개 만들고 싶다면 URL 파라미터 문법을 사용하면 된다.

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

이렇게 되면 /detail/어쩌고를 입력하면, id에 값이 입력이 된다.

이제 어떻게 사용하는지 알아보자.

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

function Detail(){
  let {id} = useParams();
  console.log(id)
  
  return (
    <div className="container>
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6 mt-4">
        <h4 className="pt-5">{props.shoes[id].title}</h4>
        <p>{props.shoes[0].content}</p>
        <p>{props.shoes[0].price}원</p>
        <button className="btn btn-danger">주문하기</button>
      </div>
    </div>
  </div>
  )
}

useParams를 사용하면 어쩌고의 값이 들어오게 된다.
그러면 변수를 하나 만들어서 값을 입력받으면 된다.