react-router-dom v6 ネスト構造の表示方法について

大手SIerでwebエンジニア3年目のなおとです。
react-routerのネストされたページの表示方法について、詰まった点を共有します！

やりたいこと

以下のキャプチャのように、page1の中にdetailを表示するようなネスト構造の作成を試みました。

解決前

ルーティングは正しくできているが、detailが表示されません。。。

各ファイル(必要なファイルのみ抜粋)

各ファイルのコードは以下のとおり

App.tsx

import { BrowserRouter, Link } from 'react-router-dom';
import { Router } from './router/Router';

export const App = () => {
  return (
    <BrowserRouter>
      <Router>
        <div className="App">
          <Link to="/">Home</Link>
          <br />
          <Link to="/page1">Page1</Link>
          <br />
          <Link to="/page2">Page2</Link>
        </div>
      <Router />
    </BrowserRouter>
  );
};

Page1.tsx

import { Link } from 'react-router-dom';

export const Page1 = () => {
  return (
    <div>
      <h1>Page1ページです</h1>
      <Link to="/page1/detailA">DetailA</Link>
      <br />
      <Link to="/page1/detailB">DetailB</Link>
    </div>
  );
};

Router.tsx

import { Route, Routes } from 'react-router-dom';
import { Home } from '../Home';
import { Page1 } from '../Page1';
import { Page1DetailA } from '../Page1DetailA';
import { Page1DetailB } from '../Page1DetailB';
import { Page2 } from '../Page2';

export const Router = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />}></Route>
      <Route path="/page1" element={<Page1 />}>
        <Route path="detailA" element={<Page1DetailA />}></Route>
        <Route path="detailB" element={<Page1DetailB />}></Route>
      </Route>
      <Route path="/page2" element={<Page2 />}></Route>
    </Routes>
  );
};

解決方法

react-router-domにある"Outlet"を使うことで改善できました。
Outletとは、ルーティングされた子コンポーネントをレンダリングするために使用されるものであり、親ルートコンポーネント内で子ルートコンポーネントを表示する場所を指定します。

改修箇所

改修箇所はなんと一か所。Page1.tsxで子コンポーネントを表示したい箇所にOutletタグを用いることで解消されました。

Page1.tsx

import { Link, Outlet } from 'react-router-dom';

export const Page1 = () => {
  return (
    <div>
      <h1>Page1ページです</h1>
      <Link to="/page1/detailA">DetailA</Link>
      <br />
      <Link to="/page1/detailB">DetailB</Link>
      <Outlet />
    </div>
  );
};

表示結果

ネスト構造の表示が正しく行われ、リンクによって子コンポーネントの表示を切り替えりことができました！
一つ抜けているだけで表示されないとは、、、奥深く挫折しやすいポイントですね。

まとめ

今回は、react-router-dom(ver.6)のネスト構造に関する表示方法について紹介させていただきました。調べた感じ、様々な解決方法があるみたいなのでマッチしなかった場合は他も調べてください！
ありがとうございました！