useParams 사용기

개인 Blog 만들기 프로젝트를 진행하던 도중 useParams를 쓸 일이 생겼다.

DetailPage.tsx

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

const DetailPage = () => {
  const { params } = useParams();
  
  return (
    <>
    	<button onClick=>{()=>console.log(params)}>dd</button>
	<>
    )
}

처음엔 이렇게 코드를 짰다.

그런데 갑자기 숫자가 뜨는게 아닌 undefined가 떠서 멘붕이 왔다
무슨 애런지도 모르겠고 계속 찾아본 결과 Router.tsx에서 문제를 찾을 수 있었다.

Router.tsx

import { Route, Routes, BrowserRouter } from "react-router-dom";
...
import DetailPage from "./layouts/DetailPage";

export default function Router() {
  return (
    <BrowserRouter>
      <Header></Header>
      <Routes>
        ...
        <Route path="/detail/:id" element={<DetailPage />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

라우터에서는 Params를 id로 넘겨줬던 것이였다...

정말 단순한 애러였지만 단순했던만큼 간과했던 것이였다....
단순한 것도 한번 다시 봐야겠다는 다짐을 했다...