useParams 가 동작하지 않습니다.

안녕하세요.

useParams 으로 파라미터 값을 보낸 뒤,

console.log() 로 값을 출력해 보고 싶은데요.

자꾸 undefined 만 출력 됩니다.

대체 이유가 뭘까요??? ㅠㅠㅠㅠㅠㅠ

// App.js
import './App.css';

import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import routes from './routes';

function App() {
  return (
    <div>
      <Navbar></Navbar>
      <div className='container mt-3'>
        <Routes>
          {routes.map((item, i) => {
            return (
              <Route
                path={item.path}
                element={item.component()}
                key={i}
              ></Route>
            );
          })}
        </Routes>
      </div>
    </div>
  );
}

export default App;

// routes.js
import HomePage from './pages/HomePage';
import ListPage from './pages/ListPage';
import CreatePage from './pages/CreatePage';
import EditPage from './pages/EditPage';
import ShowPage from './pages/ShowPage';

const routes = [
  {
    path: '/',
    component: HomePage,
  },
  {
    path: '/blog',
    component: ListPage,
  },
  {
    path: '/blog/create',
    component: CreatePage,
  },
  {
    path: '/blog/edit',
    component: EditPage,
  },
  {
    path: '/blog/:id',
    component: ShowPage,
  },
];

export default routes;

// ShowPage.js
import { useParams } from 'react-router-dom';

const ShowPage = () => {
  let { id } = useParams();
  console.log(id); // undefined 출력

  return <div>Show Pages</div>;
};

export default ShowPage;

 // routes.js
import HomePage from './pages/HomePage';
import ListPage from './pages/ListPage';
import CreatePage from './pages/CreatePage';
import EditPage from './pages/EditPage';
import ShowPage from './pages/ShowPage';

const routes = [
  {
    path: '/',
    component: <HomePage />,
  },
  {
    path: '/blog',
    component: <ListPage />,
  },
  {
    path: '/blog/create',
    component: <CreatePage />,
  },
  {
    path: '/blog/edit',
    component: <EditPage />,
  },
  {
    path: '/blog/:id',
    component: <ShowPage />,
  },
];

export default routes;