結論：公式ドキュメントをしっかり読みましょう（笑）
Reactを復習していたとき、講座内のReact Routerがv5で大幅に記述が異なっていて、
甘えてググってしまい沼に陥ってしまいました。
ネストする時の基本ルール
参考：https://reactrouter.com/docs/en/v6/getting-started/overview
Routeコンポーネントを入れ子にする
こちらは単純で、
<Route path="/" element={<App />}>
<Route path="page1" element={<Page1 />}>
<Route path="detaila" element={<Page1DetailA />} />
</Route>
</Route>
以上のような記述で、
- /
- /page1
- /page1/detaila
3ページを定義することができます。
さらに深い階層の定義に関しても同様の記述で可能です。
子階層のレンダリング位置をOutletコンポーネントで定義
入れ子構造にする際は、
親コンポーネントのどこに子コンポーネントをレンダリングするか、を記述する必要があります。
レンダリングする位置に
<Outlet />
を記述すればOKです。
ルールは以上になります。
結構シンプルですね。
公式ドキュメントを読んでみたら意外と5分で解決みたいなことはよくありますので、
一度公式ドキュメントと闘う癖をつけた方がいいかもしれないですね。