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

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
IonTabs系で色々エラーが発生したため解決のための手順をメモしました。
環境
Mac 11.1
Ionic 6.12.3
よく発生するエラー
logError: IonTabs must contain an IonRouterOutlet
IonTabの利用する上での仕様
色々触ってみて条件にマッチしないとエラーが発生するようでした。
IonRouterOutlet
の外にIonTabs
を入れる必要があるIonTabs
内にIconTabBar
が必須IonRouterOutlet
は入れ子にできる
これを踏まえてやりたいことをやるためには
exactは path
に対して完全一致の必要。 /tab3
は Tab3
のコンポーネントを表示しその他は Index
コンポーネントを表示
App.tsximport 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.tsximport 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}.tsxconst Tab{n}: React.FC = () => (
<React.Fragment>>
Tab{n}
</React.Fragment>>
);
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来
- review
人類はなぜ地球を支配できた?『サピエンス全史 上巻』ユヴァル・ノア・ハラリが解き明かす驚愕の真実
- review
え?世界はこんなに良くなってた!『FACTFULNESS』ハンス・ロスリングが暴く 10 の思い込みの正体
- review
瞬時に答えが出る脳に変身!『ゼロ秒思考』赤羽雄二が贈る思考力爆上げトレーニング
- review
関西弁のゾウに人生変えられた!『夢をかなえるゾウ 1』水野敬也が教えてくれた成功の本質