【解決方法】Ionic6系のIonTabsで色々エラーが発生したのでその時の対処について

更新Ionicエラー解消
【解決方法】Ionic6系のIonTabsで色々エラーが発生したのでその時の対処について
Memo

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

環境

Mac 11.1
Ionic 6.12.3

よく発生するエラー

log
Error: IonTabs must contain an IonRouterOutlet

IonTabの利用する上での仕様

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

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

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

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

App.tsx
import 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 コンポーネント内で更に IonRouterOutletIonTabBar を記述。
IonRouterOutlet 内で更にルーティングの設定。

Index.tsx
import 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}.tsx
const Tab{n}: React.FC = () => ( <React.Fragment>> Tab{n} </React.Fragment>> );