Ionic-framework: bug: ion-back-button picks wrong route

[simonhaenisch]

Bug Report

Ionic version:
[x] 4.x
[x] 5.x

Current behavior:
I have multiple routes that load the same component with different route props. When clicking the ion-back-button, it goes to a different route for the same component, dropping its route props.

Expected behavior:
When clicking the ion-back-button, it should have the same behavior as using the browser's back button and go back to the url of the previous history entry.

Steps to reproduce/Related code:
I created a minimal reproduction of this issue on https://github.com/simonhaenisch/ionic-nav-bug, which has been deployed to ionic-nav-bug.now.sh.

The router looks like this:

<ion-router useHash={false}>
  <ion-route url="/" component="app-home" />
  <ion-route url="/about" component="app-about" />
  <ion-route url="/profile" component="app-profile" />
  <ion-route url="/profile/:name" component="app-profile" />
</ion-router>

To reproduce, do the following:

1. Go to Ionic's profile page (/profile/ionic).
2. Go to About page (/about).
3. Click the ion-back-button (not the browser's back button).

_Expected:_ Goes back to /profile/ionic route and shows Ionic's profile.
_Actual:_ It shows Ionic's profile, but the route changes to /profile (drops the "name" route prop).

Other information:
In this case, using the browser's back button instead works as expected, because unlike nav.pop it uses the browser's history stack to go back to the previous url. So I guess a work-around for me would be to implement my own back button that simply calls window.history.back().

Sounds like it could (maybe) be related: #18569.

[gauravprasadgp]

seems perfect . any other issues you have ?

[simonhaenisch]

What seems perfect? The bug report or the back button? I don’t actually know if this is solved because we’ve been using my “custom back button with window.history.back()” workaround since then.

[gauravprasadgp]

you could have used navCtrl.pop() operation which allows to pop the page you are in .

[simonhaenisch]

Oh really? Could you explain to me how I can access navCtrl in my Stencil Ionic PWA which uses ion-router?

[gauravprasadgp]

i think you can use <ion-back-button defaultHref="/"></ion-back-button>

[simonhaenisch]

Appreciate you trying to help but could you please have a look at the the repo I made first? I don't think you have understood the bug I'm describing. defaultHref sets the page to go to when there's no other page to go back to in the history anymore, which is completely unrelated.

Given three routes /foo, /foo/:name and /elsewhere: when you go from e. g. /foo/bar to /elsewhere and then click the ion-back-button on the elsewhere page, the route (in the browser bar) will incorrectly change to /foo instead of going back to /foo/bar (even though the page is still rendered with the correct route prop because it's being cached by the Ionic router).

@gp559 if you really want to help: clone my repo, install the @next versions of Ionic and Stencil, and verify whether or not the bug still exists. Steps to reproduce are in the readme.

[gauravprasadgp]

is the issue resolved ?

[simonhaenisch]

@gp559 🤔Issues don't just resolve themselves.

I can confirm that this issue still exists with latest (@ionic/[email protected]) as well as next (@ionic/[email protected]).

@brandyscarney would you mind having a look at this and label it as a bug if you can confirm it?