IonTabs系で色々エラーが発生したため解決のための手順をメモしました。

環境

Mac 11.1
Ionic 6.12.3

よく発生するエラー

logCopy codeError: IonTabs must contain an IonRouterOutlet

IonTabの利用する上での仕様

色々触ってみて条件にマッチしないとエラーが発生するようでした。

• IonRouterOutletの外にIonTabsを入れる必要がある
• IonTabs 内に IconTabBar が必須
• IonRouterOutlet は入れ子にできる

これを踏まえてやりたいことをやるためには

exactは path に対して完全一致の必要。 /tab3 は Tab3 のコンポーネントを表示しその他は Index コンポーネントを表示

App.tsxCopy codeimport Index from 'Index.tsx';
import Tabs3 from 'Tab3.tsx';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path='/' component={Index} />
        <Route path='/tab3' component={Tab3} exact={true} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

Index コンポーネント内で更に IonRouterOutlet と IonTabBar を記述。
IonRouterOutlet 内で更にルーティングの設定。

Index.tsxCopy codeimport Tabs1 from 'Tab1.tsx';
import Tabs2 from 'Tab2.tsx';
const Index: React.FC = () => (
  <IonTabs>
    <IonRouterOutlet>
      <Route path='/tab1' component={Tab1} exact={true} />
      <Route path='/tab2' component={Tab2} exact={true} />
    </IonRouterOutlet>
    <IonTabBar slot='bottom'>
      <IonTabButton tab='Tab1' href='/Tab1'>
        <IonLabel>Tab1</IonLabel>
      </IonTabButton>
      <IonTabButton tab='Tab2' href='/Tab2'>
        <IonLabel>Tab2</IonLabel>
      </IonTabButton>
      <IonTabButton tab='Tab3' href='/Tab3'>
        <IonLabel>Tab3</IonLabel>
      </IonTabButton>
    </IonTabBar>
  </IonTabs>
);

Tab1 - Tab3のコンポーネント

Tab{n}.tsxCopy codeconst Tab{n}: React.FC = () => (
  <React.Fragment>>
    Tab{n}
  </React.Fragment>>
);