How can I show a certain component when the app starts on a Stencil JS app?
I tried doing this (it has worked in the past) on the app-root component:
<ion-app>
<ion-router useHash={false}>
<ion-route component="app-tabs">
<ion-route url="/" component="tab-home" />
</ion-route>
</ion-router>
<ion-nav />
</ion-app>
Then this on the app-tabs component:
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab-home">
<ion-icon name="home-outline"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab-transactions">
<ion-icon name="reader-outline"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab-categories">
<ion-icon name="folder-outline"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab-accounts">
<ion-icon name="person-outline"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
<ion-tab tab="tab-home" component="app-home" />
<ion-tab tab="tab-transactions" component="app-transactions" />
<ion-tab tab="tab-categories" component="app-categories" />
<ion-tab tab="tab-accounts" component="app-accounts" />
</ion-tabs>
With no luck. I don’t know what I am doing wrong, please help.
If I clicked on any of the icons in the tab bar after the app starts it shows the page I am expecting, but I want to show tab-home at boot.
First screenshot is after boot and the second screenshot is after I click the Home Icon on the tab bar.
"devDependencies": {
"@ionic/core": "^5.2.3",
"@stencil/core": "^1.15.0",
"@types/jest": "^26.0.3",
"jest": "^26.1.0"
},
I also tried following the example on the StencilJS resources:
https://stenciljs.com/resources the visited:
https://www.joshmorony.com/basic-and-advanced-tab-navigation-with-ionic-and-stencil-js/
https://dev.to/cm/stencil-routing-with-ion-router-ion-tabs-and-how-to-pass-params-to-tab-pages-without-using-angular-4lfl
