React Router v6で<Route>をネストした際に子要素のelementにたどり着かない

はじめに

React初心者です。
React Router v6でRouteのネストを使用した際に子コンポーネントの要素が表示されない問題で詰まったので解決法を記載します。

問題

問題のコードは以下の通り。

<Routes>
    <Route path="page1" element={<Page1 />}>
        <Route path="detailA" element={<Page1DetailsA />} />
        <Route path="detailB" element={<Page1DetailsB />} />
    </Route>
</Routes>

やりたかった事

• /page1なら<Page1 />のelementを呼び出す。
• /page1/〇〇なら<Page1〇〇 />のelementを呼び出す。

実際の挙動

/page1/〇〇でも<Page1 />のelementが呼び出される。

解決

Routeはヒットした時点で子は無視されるらしいです。以下の記述で思っていた通りに動作しました。

<Routes>
    <Route path="page1">
        <Route path="detailA" element={<Page1DetailsA />} />
        <Route path="detailB" element={<Page1DetailsB />} />
        <Route path="" element{<Page1 />} />
    </Route>
</Routes>

これでも行けました。こちらの方が分かりやすくて良いのかな？

<Routes>
    <Route path="page1">
        <Route index={true} element{<Page1 />} />
        <Route path="detailA" element={<Page1DetailsA />} />
        <Route path="detailB" element={<Page1DetailsB />} />
    </Route>
</Routes>

最後に

古いバージョンの情報が混在していて調べるのに苦労しました。こういった基本レベルの仕様などは頭に入れておきたいです。

参考にした記事

以下記事を参考にしました。