IonBackButton not shown with history.replace

Ionic Framework Ionic React
1

Hey there!
I wrote a pretty standard CRUD application so far using Ionic v5 / react.
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.
My 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.
I would like to show the IonBackButton on the Edit Page targeting the List Page.
Any suggestions? Thank you very much!

2

That sounds like a possible bug to me, so it may be worth raising an issue.

However as a workaround you can try setting the defaultHref property on the IonBackButton.

3

Thanks for your reply!
I opened a bug.
Lets see what will follow over there.

4

I usually go into a modal state when editing or creating, this seems to be a UI pattern and will resolve your concerns with the back button

5

I had the same idea but was a little bit too much of a change.
In the end I was able to ‘solve’ it with the workaround of @mirkonasato.

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 to 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>)
};