【React】useParams undefinedが返ってきてしまう

背景

URLパラメータを取得するのに、useParamsを使えば簡単に取得できると聞いて使ってみました。

バージョン等

React : 17.0.0
react-router-dom : 5.3.0

状況

関係するRoutes,Detailの2つの関数コンポーネントについて下記。

// Routes.tsx
export default function Routes() {
  return (
    <Switch>
      <Route exact path={"/list/:detail"} component={Detail} />
    </Switch>
  );
}

// Detail.tsx
export default function Detail() {
  const { id } = useParams<{ id: string }>(); //←undefinedになってしまっていた
  const [detail, setDetail] = useState<Hoge>();

  //初期表示処理
  React.useEffect(() => {
    requestGet(`https://hogehoge/${id}`).then((res: any) => {
      setDetail(res.data);
    });
  }, [id]);

  return (
    <div>
      <p>{detail?.hoge}</p>
    </div>
  );
}

みたいな感じで、URLパラメータを取得して、それをまた別のAPI呼び出し時に渡してあげようとしてました。
しかしながら、useParamsの返り値はundefinedでした。

原因

Routes.tsxの

<Route exact path={"/list/:detail"} component={Detail} />

の:detail部分と、
Detail.tsxの

const { id } = useParams<{ id: string }>();

{ id } 部分は同じでないとダメなようでした。

<Route exact path={"/list/:detail"} component={Detail} />
// ↓このように修正
<Route exact path={"/list/:id"} component={Detail} />

useParamsを使用してはいるが、propsを取得しているだけなので、別な名前だとundefinedになるのは当然でした。恥ずかしい。

参考