IonRouterOutlet の中には Route か Redirect しか入れてはいけない

チームの凄腕エンジニアに「Ionic/Reactでルーティング制御する際のDOMツリーに縛りがあるよ」と教えてもらった。

ionicframework.com

確かによくみると、

IonRouterOutlet には、 Route と Redirect のみを含める必要があります。 他のコンポーネントは、 Route の結果、または IonRouterOutlet の外部でレンダリングする必要があります。

IonRouterOutlet は別の IonRouterOutlet の子孫であってはいけません。

と書いてある。

自分がどういう風に書いてたかと言うと、 Route/Redirect 部分を別コンポーネントとして切り出していたのでありました。

const Routes: React.FC = () => (
  <>  
    <Route exact path="/hoge" component={Hoge} />
    <Route exact path="/fuga" component={Fuga} />
    <Route exact path="/hige" component={Hige} />
    <Redirect exact path="/home" to={Home} />
  </>
);

const Frame: React.FC = () => (
  <IonRouterOutlet>
    <Routes />
  </IonRouterOutlet>
);

理由は、条件に応じてアプリ内で有効なパスや無効なパスをこのFrameレイヤーでできればいいなと思ったからでしたが、
ルールに沿っておらず、予期せぬ挙動が起きていたり、よくない設計になっていました。

プロジェクト終盤に気づかなくてよかった・・・。