CODEWITHSUNDEEP
ionic4
Cody Burleson
Cody Burleson

Reputation: 123

How to pass parameter down into tab components

I am able to use a parameterized route with the simple example from the Ionic PWA like this:

    render() {
return (
  <ion-app>
    <ion-router useHash={false}>
      <ion-route url="/" component="app-home" />
      <ion-route url="/profile/:name" component="app-profile" />
    </ion-router>
    <ion-nav />
  </ion-app>
);

This is picked up in the corresponding profile page with a simple @Prop like this:

  @Prop() name: string;

But when I try to use a tab setup, I can't seem to get access to the parameter. This does not work:

renderRouter() {
return (
  <ion-router useHash={false}>
    <ion-route-redirect from="/" to='/blog' />
    <ion-route component="page-tabs">
      <ion-route url="/blog" component="tab-blog">
        <ion-route component="page-blog"></ion-route>
      </ion-route>
      <ion-route url="/photos/:name" component="tab-books">
        <ion-route component="page-photos"></ion-route>
      </ion-route>
    </ion-route>

  </ion-router>
);

}

How can I get access to the parameter from down in the page-photos component that is loaded in the tab-books tab? I am not using any framework other than Ionic / Stencil PWA (no Angular, React, or anything else). I'm trying to create a pure web component solution with no framework use. Can Ionic support this use case?

Upvotes: 0

Views: 412

Answers (1)

Cody Burleson
Cody Burleson

Reputation: 123

The solution, I found, was to set the url to the tab component to be only the base of the full URL (/photos/:name). Then, set the page component's url to be just the parameter part as follows:

<ion-route url="/photos" component="tab-books">
   <ion-route url="/:name" component="page-photos"></ion-route>
</ion-route>

With this setup, /photos/name, will navigate to the 'tab-books' tab, which will load up 'page-photos', which will properly obtain the name parameter via the following in the page-photos component:

@Prop() name: string;

Upvotes: 1

Related Questions