【React】React Router v6でNestがうまく動かなかった件

概要

React Router v6を利用してルーティングを行うとネストしたルーティングが動かなかった

この記事はその解決方法を残すものです

解決した方法

index-routes の仕組みを利用して階層を設定する必要があったのがポイントです

<Route path="/page1">
    <Route index={true} element={<Page1/>}/>
    <Route path="detailA" element={<Page1DetailA/>}/>
    <Route path="detailB" element={<Page1DetailB/>}/>
</Route>

全体像

App.tsx

<BrowserRouter>
    <Routes>
        <Route index element={<Home/>}/>
        <Route path="/page1">
            <Route index={true} element={<Page1/>}/>
            <Route path="detailA" element={<Page1DetailA/>}/>
            <Route path="detailB" element={<Page1DetailB/>}/>
        </Route>
        <Route path="/page2" element={<Page2/>}/>
    </Routes>
</BrowserRouter>