Navigate in nested states breaks history and ion-nav-back-button


It seems impossible to navigate to a child state of a sibling or to a child state of an ancestor.

The workaround I used was to put all the states on the same level, which allows me to navigate to any state I need (navigate from a push notification to a nested state, navigate from one nested state to a state inside another parent, etc …).

The problem with that method is that states and controllers do not inherit any code, leading to code duplication. Moreover, there are cases where the navigation is simply broken and the ion-nav-back-button do not behave as it should.

TLTR: What structure must be used to have a fully navigable application (check out the pen), when you use tabs and nested states ?

Here is the pen describing the problem :


After some research it is related to IonTabs and separated ion-nav-views. (check out this picture : )

In this case, it is better to replace tabs with custom “tabs” implementation using only one ion-nav-view as shown here :