파라미터 받기

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

이렇게 url 중에 :id를 넣으면

 

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

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;

useParam();을 이용해서 받을 수 있다.