How do I let Tabs play well with DeepLinker

Ionic Framework ionic-v3
#1

I recently upgraded my Ionic project which was based on Ionic2 beta.6 to RC.1 and skipped the router-less releases.

All got it working quite well and even got DeepLinker hooked up.
In my app.module.ts I defined the DeepLinker config. Snippet:

links: [
    {segment: 'program', component: ProgramPage, name: 'Program'},
    {segment: 'program/:id', component: ProgramDetailPage, name: 'ProgramDetail'},
    ...
]

When I navigate to my ProgramPage, the browser URL is changed correctly and I can navigate to the ProgramPage directly by navigation to http://mydomain/program.

ProgramDetailPage is a Tabs page and contains 3 different tabs. When I navigate to the ProgramDetailPage, the URL is reset to the site root (/).
This is probably because the Tabs object defines it’s own Navigation controller.

A similar rooting, for example:

{segment: 'partners/:id', component: PartnerDetailPage, name: 'PartnerDetail'},

works well since PartnerDetailPage is not a Tabs page, but a regular one.

Question
How can I let the Tabs page play well with DeepLinker? I actually don’t need Tabs to have more fine-grained control over the URL. Having the ability to define more segments within the tabs (a segment for each tab) would be nice, but not necessary. I could do with one URL for the entire Tabs page.

A related ticket:
https://forum.ionicframework.com/t/how-to-configure-deeplinks-in-appmodule-forroot/66058

1 Like
How to configure deeplinks in AppModule.forRoot()?
#2

Ok, got it to work in a way.
The only combination I got it to work with was by defining the tabs itself in the DeepLinker config itself, and also set the tabUrlPath on the tab element.

So for example I now have the following DeepLinker configuration:

 {segment: 'program', component: ProgramPage, name: 'Program'},
 {segment: 'program/:id', component: ProgramDetailPage, name: 'ProgramDetail'},
 {segment: '', component: ProgramInfoTab, name: 'ProgramDetailInfo'},
 {segment: '', component: ProgramMapTab, name: 'ProgramDetailMap'},     
 {segment: '', component: SocialShareTab, name: 'ProgramDetailShare'},

And in my ProgramDetailPage template code I define the tabs as followed:

<ion-tab tabIcon="information-circle" [root]="tabInfo" [rootParams]="tabParams" [tabUrlPath]="'info'"></ion-tab>
<ion-tab tabIcon="compass" [root]="tabMap" [rootParams]="tabParams" [tabUrlPath]="'map'"></ion-tab>
<ion-tab tabIcon="share" [root]="tabShare" [rootParams]="tabParams" [tabUrlPath]="'share'"></ion-tab>

In my DeepLinker config I define empty strings as segments, to prevent a /program/<id>/info/info to happen. This feels like trickery a bit so surely there must be a better solution – or it is a bug in the DeepLinker itself.

4 Likes
#3

Interesting work around, leaving segment blank and letting tabUrlPath be the desired name. Yeah that’s not ideal. I filed an issue. I hope someone looks at this.

#4

Reference https://github.com/driftyco/ionic/issues/9012
I am frustrated the ionic2 is not going to address this problem

#5

@xinbenlv please comment on the Github issue. If enough people make noise, they will prioritize it. For me, this is a release blocking bug. I’m going to have to code all sorts of hacky JS to work around it while waiting for them to address it.

#6

Hello @morrisonbrett, thanks for filing an issue for this.
Last couple of days I have been pretty pre-occupied with other things, I will dive into this soon and leave my comment/findings/noise there as well :wink:

1 Like
#7

Hi @morrisonbrett, is there any update on this?

3 Likes
#8

I code my entire app only to be brought to this bug. In 2018 this is still an issue and ionic team is focused on its latest release v4 with stencilsjs and capacitor.

#9

Same issue here…

I hope in v4 the Ionic team will have had time to rethink/fix Deeplinking and/or support Angular’s Router.

#11

I need to start a new project and would be nice to have this fixed

1 Like