useParams 사용법을 기억하기위해 이 글을 작성한다.

파라미터 설정

우선 라우터에서 파라미터를 설정해줘야 한다.

import Detail from "pages/Detail";
import Home from "pages/Home";
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const Router = ({workoutData, addWorkout}) => {
	return (
		<BrowserRouter>
			<Routes>
				<Route path="/" element={<Home workoutData={workoutData} addWorkout={addWorkout}/>} />
                <Route path="/detail/:id" element={<Detail workoutData={workoutData}/>} />
			</Routes>
		</BrowserRouter>
	);
};

export default Router;

:id 부분이 바로 파라미터로 설정할 값 이다.
파라미터는 콜론을 통해 설정할 수 있다.

useParams

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

const Detail = () => {
    const {id} = useParams();
	return <div>{id}</div>;
};

export default Detail;

useParams를 사용하면 key : value 페어된 객체가 반환된다.