ネストする時の基本ルール

参考：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分で解決みたいなことはよくありますので、
一度公式ドキュメントと闘う癖をつけた方がいいかもしれないですね。