The browser back button takes me forward. What am I doing wrong?

Ionic Framework
1

I have a navigation path that starts on page A, then goes to page B, then on to page C. Most of my pages have an <ion-back-button> in the header. If I hit the back button on page C, I go back to page B. Cool. BUT, if I then immediately navigate back (using the browser back button or a swipe gesture on mobile) toward page A, it takes me back to page C! Why?! I’ve been trying to figure out how to fix this for so long.

The app works fine if I use only the browser back button or only the <ion-back-button>. And it’s like the framework goes by different rules depending on if I’m tapping the <ion-back-button> vs. the browser back button. Are there guidelines I should code by to keep these two navigation methods in agreement?

1 Like
2

Please, post some code!

1 Like
3

Okay, see my edit where I’ve added the code used to navigate forward/backward.

4

Not sure why, but Ionic forums removed my edit where I added code. Sigh.
Here is the code that navigates from Page A to Page B:

const extras: NavigationExtras = {
    state: {
        team: team.team || team,
        isAthlete: team.position === 'athlete',
    },
};
this.navCtrl.navigateForward('landing/team', extras);

Here is the code that navigates fro Page B to Page C:

this.navCtrl.navigateForward('athlete-team-routines-overview', {
    state: {
        isInspecting,
        user: athlete,
        canEdit: !this.isAthlete || !isInspecting,
        team: {
            team: this.team,
            routines: athlete.routines || [],
        },
    }
});

Back navigation from Page C to Page B is done via <ion-back-button />

1 Like