react-router-dom v6で視覚的にネストした記述法

概要

react-router-dom v6でネストしたルーティングを記述する際、ソースコードを視覚的にネストさせて記述する方法

参考記事

ネストせずに記述する場合

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

• これでもpage1のページからdetailA,detailBへとネストしたページ遷移は可能
• ただ視覚的にネストしたページ遷移であることが分かりづらい（インデントが入っていないのと、絶対パスになっているため）

ネストさせた記述法

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

• ネストの親ページに対しindexを指定
• 子ページには絶対パスではなく、親ページからの相対パスで記述する
• コード整形ツールを入れている場合、自動でインデントが入る

まとめ

ネストしたルーティングはソースコードも視覚的にネストさせたほうが分かりやすいので、react-router-dom v6を使用する際は積極的に使用したほうが良さそうです。

私自身、まだReactの学習をして日が浅くバージョンの違いによる記述法を調べるのは大変ですが、これからキャッチアップ力を鍛えていきたいです。