react url parameter

상품판매 사이트나 게시판의 경우 모든 페이지를 하나 하나 직접 설정 하는 것이 불가능하므로
url parameter를 사용한다.

<Route path="/detail/:id" element={ <DetailPage/> }/>
이 때 (당연히) detail 페이지 별로 다른 정보를 받아와 보여주어야 하므로

<Route path="/detail/:id" element={ <DetailPage data={data}/> }/>
detail 컴포넌트에서 사용할 data를 보내주고 id 별로 다른 데이터를 보여주면 된다.
url에 적혀있는 id는 useParams를 이용하면 받아올수 있다.

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

function DetailPage(props) {
let {id} = useParams();
  return (
    <div className="container">
      <div className="row">
        <div>
          <img src={props.data[id].imgurl} />
        </div>
        <div>
          <h4>{props.data[id].title}</h4>
          <p>{props.data[id].contents}</p>
        </div>
      </div>
    </div>
  );
}

export default DetailPage;