React Router 동적 라우팅

보여지는 화면은 그대로 유지하면서 데이터만 달라질 경우 동적라우팅을 사용

<Route exact path="/user" component={UserPage} />
<Route exact path="/user/:id" component={UserPage} />

useParams를 이용하여 콜론 뒤의 변수명에 들어간 값을 조회할 수 있다.

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

const { id } = useParams(); 
console.log(id); //id 자리에 들어간 값이 출력됨