Do deep links violate "Switching between tabs" rules?

Ionic Framework Ionic React
1

The Docs for React navigation say:

“Since each tab is its own navigation stack, it is important to note that these navigation stacks should never interact. This means that there should never be a button in Tab 1 that routes a user to Tab 2. In other words, tabs should only be changed by the user tapping a tab button in the tab bar.” React Navigation: Router Link Redirect to Navigate to Another Page

But my app has a FAB that has shortcuts to various parts of the app (usually with query param state pre-filled). (pressing the FAB opens various smaller icon buttons that when pressed route the user to a specific page with state provided in query params). I also have notifications that provide a deep link to a specific page (with query param state). My questions are:

  1. Does this violate the rule stated above? If a user is on tab-A and they click on the FAB shortcut to go to tab-B?param1=123&param2=abc, does that count as changing tabs without tapping on a tab button in the tab bar?

  2. If so, what is the worst that could happen? Will something actually break or is it just a matter of not meeting the expectations of how navigation works on mobile?

  3. Does this mean deep linking is never allowed since it might route the user to a different tab than they are on when they use the deep link?

2

I don’t speak on authority as I am just a community member, but I would say yes it probably breaks the “rules”?

I will share my own experience with our Ionic Vue app. We route to inner pages from push notifications and we route between tabs. We were doing this before this guidance was given/clarified. For the most part, it works. Sometimes navigating from push notifications will fail and just open the app on the main screen. And sometimes routing between tabs gets wonky where the tab will show changed but the content doesn’t actually change.

I would say just try it. From my experience, it mostly works. Just note that it is not recommended or officially supported :grin:

1 Like
3

I am not sure about deep links from a push notification, but deep links within the app (using, say, a button or regular a href link that points to a page on another tab) or the fab button can result in the following unwanted behaviors in React:

  • The content of a tab can get locked, so the tab will show the wrong content (the content of another tab) and there is no way to fix this without manually closing the app and re-opening it. (Closing the app in the regular way and re-opening it will restore the bad state.) This can completely prevent doing anything on the affected tab. Some users do not know how to manually close apps so depending on their technical skill level, your app may be completely broken for them.
  • Back navigation (the IonBackButton component) can break and refuse to go anywhere.

In general, if you need a page accessible on two or more tabs, it should be a modal, not a page, and then you launch the modal in each tab. This will maintain the rules and avoid getting your tabs locked.