React) 리액트 라우터 03_url 파라미터 + useParams

url파라미터

만약, 상세페이지를 여러개 만들면?
이렇게 다 따로 path를 지정해줘야함..
매우 귀찮음..

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

/:id 이 자리에 사용자가 주소창에 접근한 하위 페이지의 데이터가 들어온다.
만약 사용자가 detail/1이라고 주소창에 검색하면, :id에는 1이온다.

이를 받아 각자 다른 하위페이지로 넘겨주자

---

useParams

Default.js 내에서

1. import해주고

import { useParams } from "react-router-dom";

2. let {id} = useParams();의 형태로 변수에 담아사용한다.

function Detail(props){
    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">
                <h4 className="pt-5">{props.shoes[id].title}</h4>
                <p>{props.shoes[id].content}</p>
                <p>{props.shoes[id].price}</p>
                <button className="btn btn-danger">주문하기</button> 
                </div>
            </div>
        </div> 
    )
}

export default Detail;