Ionic routing breaks when navigating to url twice

Issue

When navigating through a page stack i've discovered that when i visit the same page twice the <ion-back-button> does not behave as expected. Here is a graphic of the issue.

It seems that Ionic does not navigate back from the last data of Page 1 but rather of the first occurrence (red arrow). I've found a similar Github issue 16516 which should be fixed but it doesn't work for me.

Has anyone encountered this or can provide a fix/workaround?

My Versions

"@ionic-native/core": "^5.0.0",
"@ionic/angular": "^5.0.0",

update:

i created a issue on Github like suggested in the comments.

Solution

I've come across the exact same issue. I think the issue is based on the page url and not on the page component itself. If you navigate to an url that already exists in the navigation stack history, Ionic will redirect you to that existing page and will also remove all pages in between.

The workaround I'm using for now is to add a timestamp to each page's url that is likely to be added several times in the navigation stack. This will make sure that a new instance of a page component will be created and pushed into the stack instead of reusing an old one.

Component

import {NavController} from '@ionic/angular';

export class MyPage {

  constructor(private navController: NavController) {}

  navigate() {
    // You can use an NavigationOptions object if needed
    const options = { queryParams: { parameter: "value" } };
    this.navController.navigateForward(['/url', new Date().getTime()], options);
  }
}

Template

<button (click)="navigate()">Navigate</button>

Let me know if it works for you.

Answered By - Reqven