[React]router useParams

Params

<div className="App">
      <Routes>
        <Route path="/" element={<Item/>}></Route>
        <Route path="/detail/:id" element={<Detail/>}></Route>
      </Routes>

    </div>

/detail/1 경로로 들어가게되면

Detail 컴포넌트가 실행되는데,

해당 Detail 컴포넌트에서는 useParam Hook으로 id 에 대한 값을 가져올수 있다.

로그를 찍어보면

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

export default function Detail() {
    const {param} = useParams();
    console.log(param)
  return (
    <div>Param {param.id}</div>
  )
}

id에 매칭되어 파라미터값이 들어오는것을 확인할 수 있다.

주의할점!

useParams 타입으로 String 을 반환한다.

보통은 문제되지 않는데, typescript에서 파라미터를 받을때 보통 number로 설정하는데 string이기때문에 타입변환을 해줘야한다.