리액트 라우터 useParams 주의점

- 라우트 해놓은 것들

import { Routes, Route } from "react-router-dom";
import Video from "./components/Video/Video";
import VideoDetail from "./components/Video/VideoDetail";
import NotFoundPage from "./pages/NotFoundPage";
import Card from "./components/UI/Card";

function App() {
  return (
    <>
      <Routes>
      <Route path="/" element={<Card />}>
      <Route path="videos" element ={<Video/>}/>
      <Route path="videos/:id" element ={<Video/>}/>
      <Route path="videos/watch" element={<VideoDetail />} />
      <Route path="videos/watch/:id" element={<VideoDetail />} />
      </Route>
      <Route path="*" element ={NotFoundPage}/>
      </Routes>
    </>
  );
}

export default App;

- VideoDetail 컴포넌트

import React from 'react'
import classes from './VideoDetail.module.css'
import { useParams } from 'react-router-dom'

function VideoDetail() {

    const {params} = useParams();

    console.log(params);


  return (
    <div>
    <h1>{params}</h1>
    </div>
  )
}

export default VideoDetail

여기서 콘솔창에 params 를 입력해보면 undefined 값이 나오는 문제가 발생했다.

검색해보니 라우터들을 지정해줄때 /:id 로 지정해준 값과 useParams에서 사용할 변수명이 같아야 했다.

라우터에서 /:id 로 지정했으니 useParams에서도 id 값으로 지정을 해주어야하는것이고, 만약 라우터에서

/:keywords 로 지정했다면 useParams에서도 keywords로 변수명을 지정해주면 되는것이다.