[React] useParams를 이용해 파라미터 가져오기

React에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 useParams훅을 사용하면 됩니다.

App.js입니다.

Router의 경로에 diary/:id라고 되어있습니다. 

ex) 주소창에 diary/5라면 id = 5인 것입니다.

<Route path="diary/:id" element={<Diary />} />

Edit.js입니다.

import { useParams } from "react-router-dom";
const { id } = useParams();

useParams를 import해줍니다.

const {id}=useParmas로 id 변수에 파라미터를 넣어줍니다.

 

아래 링크는 라우터 관련 글입니다.

https://peter-coding.tistory.com/202

[React] 라우팅(react-router-dom)(useParams, Query)