react-router-domによるページング

簡単なプロジェクトでは
プロジェクトの必要に応じて4つの詳細な説明ページを作成します.
4ページをハードコーディングしていたのですが、
別のメンバーは、useparams()が1つのページで提供する方法で置き換えることを要求します.
すなわち、バックエンドからインポートされるデータのみが異なり、コンポーネント全体が同じである場合、重複コードよりも簡潔な方法が望ましい.

<Link to="/intro/4" className="BtnToRoom">
<Link to="/intro/6" className="BtnToRoom">
<Link to="/intro/10" className="BtnToRoom">
<Link to="/intro/20" className="BtnToRoom">

上記のページのurlを追加します.
react-router-domのuserParams()を使用しました.
userParams()ページのurlを
より正確には、routerで記述された部分に対応する値が取得されます.

const a = useParams();

作成します.
aを出力すると、

<Route path="/intro/:roomNum" element={<RoomInfos />} />

router.jsで作成した情報はオブジェクト形式で出力されます.

(実際にroomNumに出力されていることがわかります.)
私が書く情報はroomnumなので、a.roomnumにアクセスしました.
そしてこれは私が頑張っている部分で、string형태出てきました...
バックエンドに格納されている情報は整数だからです.
データとの比較演算後にインポートした関数でParseInt()を行う必要があります.
無駄に4つのjsファイルを作成するよりずっときれいです.