How deep is the new IonicPage deep link system?

Ionic Framework ionic-v3
1

Can you do multiple dynamic levels in the new deep linker? Does defaultHistory accept params?

Here’s what I mean. Say you’re doing a taxonomy app and you want a URL/segment scheme that looks something like:

/family/:familyId/genus/:genusId/species/:speciesId

This means the URL for a dog would be:

/family/canidae/genus/canis/species/c_lupus

If you land on the species page, the back button should go to the genus page. But can you send canidae & canis back through defaultHistory as familyId & genusId params, like this?

@IonicPage({
  name: 'species',
  segment: 'family/:familyId/genus/:genusId/species/:speciesId',
  defaultHistory: ['family/:familyId/genus/:genusId']
})

I would then want the genus page to have a back button that would send the user back to the family page:

@IonicPage({
  name: 'genus',
  segment: 'family/:familyId/genus/:genusId',
  defaultHistory: ['family/:familyId']
})

But this line from the docs worries me: “This history will only be used if the history doesn’t already exist.” Does this mean that when the user navigates once, the defaultHistory gets preempted?

My hope is that the deep linker is (or will be) smart enough rebuild this full hierarchy.

Or since defaultHistory “takes an array of strings,” do you do it all in one go by adding a full history of multiple levels, like?

@IonicPage({
  name: 'species',
  segment: 'family/:familyId/genus/:genusId/species/:speciesId',
  defaultHistory: [
    'family/:familyId/genus/:genusId',
    'family/:familyId'
  ]
})

That could get unwieldy. If you wanted to do a full taxonomy (species, genus, family, order, class, phylum, kingdom, domain) you’d have to do something like:

defaultHistory: [
  'dom/:domId/kin/:kinId/phy/:phyId/cla/:claId/ord/:ordId/fam/:famId/gen/:genId',
  'dom/:domId/kin/:kinId/phy/:phyId/cla/:claId/ord/:ordId/fam/:famId',
  'dom/:domId/kin/:kinId/phy/:phyId/cla/:claId/ord/:ordId',
  'dom/:domId/kin/:kinId/phy/:phyId/cla/:claId',
  'dom/:domId/kin/:kinId/phy/:phyId',
  'dom/:domId/kin/:kinId',
  'dom/:domId'
]

While workable, a param that takes a string for a single page (like defaultBack, defaultPop, defaultParent, or whatever) would make more sense than an array, as long as the deep link system is smart enough to walk up the hierarchy, page-by-page, to build the complete history.

On another note, it might be time to add an “Ionic 3” category to the forum.

2

Turns out defaultHistory has nothing to do with segments. The string you put in the array is of the class name of the page (or of the name property from the DeepLinkMetadata object if you’ve added that).

You can add multiple pages in defaultHistory in order to go back up through a hierarchy. But you can’t pass URL params back through the history as you walk back through the breadcrumbs.

So it looks like we are currently limited to a single level when working with dynamic params and can’t do what I’ve explained above.

3

So quoting the IonicPage description:

An example of an application with a set history stack is the Instagram application. Opening a link
to an image on Instagram will show the details for that image with a back button to the user’s profile
page. There is no “right” way of setting the history for a page, it is up to the application.

How do you pass parameters to the “previous” page, that is the one defined in the defaultHistory array? How does that page know which users profile to display?

4

Good catch. The only way that makes sense is if they mean the profile of current user of the app rather than the profile of the user who posted the photo. But I assume they had the former scenario in mind.

Anyway, here’s a feature request I created to add a backSegment property which would grab URL params and pass them back through the hierarchy.

1 Like