React navigation: Problems with controlling direction and animation


So let’s say I navigate from /fruits to /fruits/apple. Now from there I want to navigate to /fruits/banana by replacing the route, so that the back button still brings me back to /fruits from the new location. Also, I want no animation. With what is described in the docs, that seems not to be possible. Here’s what I’ve tried:

  1. When using <IonButton routerLink="/fruits/banana" routerAnimation="none" routerDirection="none">Go to banana</IonButton>the animation is correct but somehow the whole route stack is destroyed, so the back button disappears etc. Is this correct behaviour? Shouldn’t only the top route be replaced?

  2. When using history.replace(’…’) I cannot specify the animation. It always uses the unexpected “forward” animation

  3. Using the undocumented NavContext with this.context.navigate('/fruits/banana')also destroys the route stack.

So my question: How do I replace /fruits/apple with fruits/banana ? I cannot afford losing the route stack, since one can arrive at /fruits/apple from different locations in the app.