React Router
2023/9/24 14:47:00
『React Router から TanStack Router へ徐々に移行する技術』
2024/12/22 13:58:00
React RouterのRouteでuseParamの値をComponentの引数に入れるやつ
2023/9/24 14:47:00
モチベーション
useParam（副作用）のモックを作るのが面倒なので、単体テストしづらいんじゃとなった
本体
import { ReactNode } from "react";
import { useParams } from "react-router-dom";
export function RouteSolver({Component, args}:{Component:(props:any)=>ReactNode, args:any}) {
const params = useParams()
return <>{Component({...params, ...args})}</>
}
使い方
<Routes>
<Route path="/:kno" Component={()=><RouteSolver Component={KnoToPost} args={{}} />} />
</Routes>