Ionic React路由：过渡动画、页面状态与历史残留的冲突问题

问题背景 #

在Ionic React中使用路由时，遇到以下矛盾场景：

• 正常带过渡动画的跳转会保留源页面历史：

  const router = useIonRouter()
  router.push("/page1", "forward", "push")
  

• 改用pop动作移除源页面历史，但返回时前页会重新加载丢失状态：

  router.push("/page1", "forward", "pop")
  

• 改为routerDirection="none"保留状态，但过渡动画失效，即使显式传入animationBuilder也无法恢复：

  router.push("/page1", "none", "pop")
  // 尝试自定义动画也无效
  router.push("/page1", "none", "pop", undefined, customTransitionAnimation)
  

需要实现：跳转后不保留源页面历史，返回时前页状态不丢失，同时正常显示过渡动画。

使用包版本：

"@ionic/core": "8.4.1",
"@ionic/react": "8.4.1",
"@ionic/react-router": "8.4.1",
"react": "18.3.1",

解决方案 #

使用replace路由动作替代pop，同时指定动画方向和自定义动画（可选）：

基础实现（使用默认动画） #

const router = useIonRouter()
// 用replace替换当前栈条目，保留动画和前页状态
router.push("/page1", "forward", "replace")

自定义动画实现 #

import { useIonRouter } from '@ionic/react';
// 导入你定义的自定义过渡动画
import { customTransitionAnimation } from './path-to-your-animation';

const router = useIonRouter();

router.push("/page1", "forward", "replace", undefined, customTransitionAnimation);

原理说明 #

• replace动作会将当前页面在路由栈中替换为目标页面，不会新增或移除栈中其他页面，因此源页面不会留在历史记录中。
• 前页并未被从路由栈中移除，只是当前条目被替换，因此通过IonBackButton返回时，前页的组件实例仍存在，状态得以保留，不会重新加载。
• 指定routerDirection="forward"会触发Ionic默认的前进过渡动画，也可通过animationBuilder传入自定义动画，动画能正常执行。

内容的提问来源于stack exchange，提问作者hinofight