[React] 훅(Hook) - useParams

 

- url 파라미터에 입력한 값 가져오기

import { useState } from 'react';
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';
import Detail from './routes/Detail';

function App() {


  return (
    <div className="App">

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

    

    </div>
  );
}


export default App;

 

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


function Detail(props) {

    let {id} = useParams();

    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                <img src={"https://codingapple1.github.io/shop/shoes" + (props.shoes[id].id + 1) +".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;

 

- URL 파라미터 여러개 만들 수 있음 

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