Confused with navigation and deeplinks

Ionic Framework ionic-v3
1

I just updated our app to ionic 3.5.0 and I saw that now the URL is rewritten in my desktop browser (for example /#/fv/home is automatically rewritten to /#/nav/n4/fv/home).

I’m not really happy with that “ugly” URL and I’d like to keep using my clean URLs. So I started to dig in documentation about navigation and deeplinks and I am now a bit confused.

In our current app, we are using the deepLinkConfig like described at the end of that page https://ionicframework.com/docs/api/IonicModule/.

IonicModule.forRoot(..., { mode: 'md' }, { links: [ { component: FvCachePage, name: 'Cache', segment: 'cache' }, { component: FvPage, name: 'fv', segment: 'fv/:fvL1' }, { component: FvPage, name: 'fv', segment: 'fv/:fvL1/:fvL2' }, { component: FvPage, name: 'fv', segment: 'fv/:fvL1/:fvL2/:fvL3' }, { component: FvPage, name: 'fv', segment: 'fv/:fvL1/:fvL2/:fvL3/:fvL4' }, { component: FvPage, name: 'fv', segment: 'fv/:fvL1/:fvL2/:fvL3/:fvL4/:fvL5' }, { component: FvPage, name: 'fv', segment: 'fv/:fvL1/:fvL2/:fvL3/:fvL4/:fvL5/:fvL6' }, { component: LoginPage, name: 'login', segment: 'login' }, { component: ResetPasswordPage, name: 'Reset password', segment: 'reset-password/:token', defaultHistory: [ 'login' ] }, { component: VersionPage, name: 'version', segment: 'version' }, ] })

This configuration allows us to manage dynamic links.

That deepLinkConfig property is not really documented and now it seems we can use the @Page decorator to define the segment for a page.

Does the @Page decorator support multisegments? Will that deepLinkConfig property be soon removed? What happens if we mix them?

Another question related to navigation, you can easily change the URL in your browser navigation bar. It means a user can easily try to access some URL that doesn’t match any defined segment in our app. How can we manage those “404” pages? Right now it is just showing some message cannot get /fjdhjfhdjfh.

And the last one: is the native deeplinks plugin related at some point with segments we defined in our app or it just manages its own links like indicated in the documentation?

2

Pretty sure the release notes for 3.5.0 say the links are going to change again in a future release. My advice is: spend time on some other aspect of your app until the situation settles. Or revert to a version of the framework that handles links a way you like, and never update.

As I’ve often posted here (and I’m sure forum regulars are tired of hearing it from me), Ionic is great for handheld devices, but is not ready for prime time on desktoppy platforms. Once this situation with links and desktop-style navigation settles, I’ll focus on deeplinks, etc. Until then, I’m staying far away.

2 Likes
3

Yes, they do:

The URLs will likely change again in the near future with the next round of navigation improvements too.

https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#notes

4

Ok,but actually how to remove /nav/n4 from links ?

And… why the official doc do not explain this new behaviour?

5

If the docs are lacking, please create an issue at https://github.com/ionic-team/ionic-site/issues so this doesn’t get swiped under the rug. (Probably someone forgot or changes didn’t get committed or deployed - developers tend to be people that also make mistakes…)

6

Actually Dan told to another member of my team this is the first step to improve Ionic navigation. Soon will come more changes allowing to get a clean/customizable URL. We will keep using 3.4.x for now.

About other questions (deepLinkConfig, @Page decorator, native deeplinks), any comment?

7

I was using deepLinkConfig and had no intention of changing anything. However, I upgraded to 3.4.0 and found that my deep links are not working. I noticed that since 3.0.0, the api docs have removed deepLink. So, I felt that IonicPage approach may work, but that is not the case. So now, it seems there is no approach at all to make deepLink work. Some workaround is needed immediately to restore the deepLinkConfig approach.