【備忘録】ReactRouteでパスパラメータidを受け取れるようにする

やりたいこと

http://localhost:.../card/:idのパラメータidに設定された値を取得したい。

実装

pathで:idを設定、ReactRouterのuseParamsを使用しidを取得する。

App.tsx

return (
  <BrowserRouter>
　　<Routes>
  　　<Route path="/" element={<Top />} />
    　<Route path="/card/:id" element={<Card />} />
  　</Routes>
　</BrowserRouter>
);

components/Card.tsx

import { useParams } from "react-router"

export function Card() {
  const {id} = useParams();
  return (
    <>
      <h1>{id}</h1>
    </>
  )
}

詰まっていたところ

パラメータの受け渡し方法がわからなかった