bug: Ionic React navigate with push from useIonRouter ignores direction when used as "replace"

[babycourageous]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

using Ionic React and useIonRouter the direction is not respected if the route action is "replace". It always goes "forward"
If the action is "push" (the default) all directions respected.

Expected Behavior

Direction of the router should behave based on function call - no matter the route action.

Steps to Reproduce

In the repo, fire up the app and you should go to the EXAMPLE menu item. Here there are three links to detail pages.
Detail 1 has a button to redirect using "replace" with direction "none" - this will redirect but animate using "forward"
Detail 2 has a button to redirect using default behavior ("push") with direction "none" - this will redirect and have no page transition animation.

Code Reproduction URL

https://github.com/babycourageous/ionic-use-ion-router-direction-bug

Ionic Info

Ionic:

Ionic CLI : 6.17.1 (/Users/renedellefont/.fnm/node-versions/v14.17.6/installation/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 5.8.4

Capacitor:

Capacitor CLI : 3.2.5
@capacitor/android : not installed
@capacitor/core : 3.2.5
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 1.5.0

System:

NodeJS : v14.17.6 (/Users/renedellefont/.fnm/node-versions/v14.17.6/installation/bin/node)
npm : 6.14.15
OS : macOS Big Sur

Additional Information

Just let me know if there's any more info you need!

[gregorgretz]

i stumbled across the same problem and can confirm the described behavior

[fr3fou]

any updates? I've been dealing with the same thing

[gregorgretz]

in my use case I just wanted to use 'none' as routerDirection to remove the page animation. My workaround was to pass the animationBuilder property and use an empty animation like that:

router.push(n.href, 'none', 'replace', {}, createAnimation());

maybe this will help someone

[ankrut]

Same issue with v6.x. I also noticed that it works only if there is no history yet. For example, if the first push is a back with replace then it will work properly with a back animation. But then all following push calls (with replace) will result in a back transition, regardless if the routerDirection is back or forward. Analog behavior if the first push is a forward.

So, a push with a replace seems to ignore the routerDirection unless it is the first call with no history yet.

I found the following workaround

const router = useIonRouter()

// navigation back
router.routeInfo.routeDirection = 'back'
router.push('some/path', 'back', 'replace')

// navigation forward
router.routeInfo.routeDirection = 'forward'
router.push('some/path', 'forward', 'replace')

[aeharding]

in my use case I just wanted to use 'none' as routerDirection to remove the page animation. My workaround was to pass the animationBuilder property and use an empty animation like that:

router.push(n.href, 'none', 'replace', {}, createAnimation());

maybe this will help someone

This works, the only drawback is that the swipe back animation is broken.

[TylerAHolden]

I do not know why it works but I had to do a mix of both of these solutions....

ionRouter.routeInfo.routeDirection = 'none';
ionRouter.push(url, 'none', 'replace', {}, () => createAnimation());

[aeharding]

@TylerAHolden Unfortunately that doesn't solve it for me, the swipe back animation still doesn't work (due to forcing it off from createAnimation() call)

[TylerAHolden]

@TylerAHolden Unfortunately that doesn't solve it for me, the swipe back animation still doesn't work (due to forcing it off from createAnimation() call)

Ah yes the swipe back still doesn't work.

[liamdebeasi]

Hi everyone,

Here is a dev build with a proposed fix if anyone is interested in testing:

npm install @ionic/react@7.6.1-dev.11702046065.12315cc7 @ionic/react-router@7.6.1-dev.11702046065.12315cc7

[ionitron-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.