bug: IonBackButton not shown with history.replace

Ionic version:

[ ] 4.x [x] 5.2.3

I’m submitting a …

[x] bug report [ ] feature request

Current behavior: I wrote a pretty standard CRUD application so far using Ionic v5.2.3 / react v16.13.1 In this app amongst other things I am using the following page navigation: List Page > Detail Page > Detail Edit Page Because I want to replace the Detail Page page with the Detail Edit Page page in the navigation history when clicking the edit button I am using history.replace('/route/to/detail-edit') So far so good. The problem here is the automatic IonBackButton behavior. Navigating List Page > Detail Page shows the IonBackButton correctly. But when the Detail Edit Page is shown (by history.replace) the replace button does not appear. The browser back button in turn leads me to the List Page as desired.

Expected behavior: I think the IonBackButton on the Edit Page should be visible and target the List Page.

Steps to reproduce:

1. clone https://github.com/chsymann/ion-back-button-bug
2. Install node modules
3. run ionic serve
4. click the buttons and read the text

Other information:

Ionic info:

Ionic:

   Ionic CLI : 5.2.3

Utility:

   cordova-res : not installed
   native-run  : 0.2.7 (update available: 1.0.0)

System:

   NodeJS : v8.10.0
   npm    : 6.14.5
   OS     : Linux 4.15

[chsymann]

Thank you very much for your reply! I was indeed able to ‘solve’ it using the defaultHref attribute.

I installed react-router-last-location from npm, wrapped my Route-Components with <LastLocationProvider/> like this:

<IonReactRouter>
  <LastLocationProvider>
    <Route ...>
  </LastLocationProvider>
</IonReactRouter>

and was then able to change my code like this:

import React from 'react';
import {IonButton} from '@ionic/react';
import {useHistory} from 'react-router';

const DetailPage = (props) => {
  const history = useHistory();
  
  const clickedEditButton = () => {
    // preventLastLocation is important here
    history.replace('/route/to/edit/page', {preventLastLocation: true});
  };

  return (<IonButton onClick={() => clickedEditButton()}></IonButton>)
};

and the edit page looks like

import React from 'react';
import {IonBackButton} from '@ionic/react';
import {useLastLocation} from 'react-router-last-location';

const EditPage = (props) => {
  const lastLocation = useLastLocation();

  return (<IonBackButton defaultHref={lastLocation?.pathname}></IonBackButton>)
};

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.