useParams / undefined 해결

❌ issue
useParams을 사용해 키워드를 불러 오려고 했으나 undefined라고 프린트됨

videos.jsx

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

return <div>Videos : {keyword}</div>;
}

index.js의 라우터 설정
const router = createBrowserRouter([
  {
...
children: [
...
{ path: "/videos/:video", element: <Videos /> } <= 문제의 코드
...
    ],
  },
]);

✅ 해결
useParams으로 불러올 키워드 설정과
리액트 라우터 주소의 키워드 경로를 맞춰줌

videos.jsx
const { keyword } = useParams();
return <div>Videos : {keyword}</div>;
}

index.js
{ path: "/videos/:keyword", element: <Videos /> }

🤟 도움
인프런 useParams undefined