[SOLVED] Ionic routing with tabs in PWA toolkit

Stencil
1

I cloned the PWA toolkit (https://github.com/ionic-team/ionic-pwa-toolkit) and try to convert the Ionic routing to a tabs based navigation routing. I wasn’t that successful. Anyone achieved that?

Like displayed in the doc, I was able to replace the routing with the tabs, respectively in app-root my render method:

render() {
        return (
            <ion-app>
                <ion-tabs>

                    <ion-tab tab="home" component="app-home">Home Content</ion-tab>
                    <ion-tab tab="settings" component="app-settings">Settings Content</ion-tab>

                    <ion-tab-bar slot="bottom">

                        <ion-tab-button tab="home">
                            <ion-label>Home</ion-label>
                            <ion-icon name="home"></ion-icon>
                        </ion-tab-button>

                        <ion-tab-button tab="settings">
                            <ion-label>Settings</ion-label>
                            <ion-icon name="cog"></ion-icon>
                        </ion-tab-button>

                    </ion-tab-bar>
                </ion-tabs>
            </ion-app>
        );
    }

but now I’m stuck trying to reimplement the profile routing aka I want to add a specific Ionic routing to the home tab in order to be able to navigation from that tab to a sub route respectively I would like to implement the following routing as the one of that particular tab

 <ion-router useHash={false}>
      <ion-route url="/" component="app-home" /> <!-- I want that one to be the root of the tab -->
      <ion-route url="/profile/:name" component="app-profile" /> <!-- this one as subpage -->
 </ion-router>
 <ion-nav />

Any idea?

2

Solved, there is a nice provided example in the Ionic conference app with Stencil. Just followed the example and everything went fine

1 Like