When using routing in Ionic React, the following code executes a transition animation:
const router = useIonRouter()
router.push("/page1", "forward", "push")
Here, if I change routeAction to pop to avoid leaving the transition source in the history, the transition animation is maintained.
However, when returning to the previous page with IonBackButton, the page state is not retained, and a reload occurs.
I want to maintain the page state in this case.
router.push("/page1", "forward", "pop")
Therefore, I changed routerDirection to “none”.
As a result, the page state was maintained, but the transition animation was disabled.
router.push("/page1", "none", "pop")
Also, I explicitly set the animationBuilder parameter as follows, but the transition animation still does not execute:
router.push("/page1", "none", "pop", undefined, customTransitionAnimation)
I want to achieve a transition animation while preserving the state of the previous page but without leaving the previous page in the history during page transitions.
Could you please provide the solution?
The package versions are as follows:
"@ionic/core": "8.4.1",
"@ionic/react": "8.4.1",
"@ionic/react-router": "8.4.1",
"react": "18.3.1",