React Router + React Pose路由POP/PUSH切换动画方向异常问题求助

我之前在使用React Pose做路由切换动画时，也碰到过类似的首次回退动画异常情况，结合你的代码和描述，给你几个针对性的排查和修复思路：

可能的问题根源 #

1. PoseGroup状态更新不同步：首次触发POP时，Redux的clickedBack/routePopped状态切换后，PoseGroup的preEnterPose、exitPose和reverse属性可能没有及时同步到内部逻辑，导致进入的页面复用了旧的pose配置，出现动画冲突。
2. posed组件的pose状态未响应props变化：虽然你给ContextRouteAnimation传递了reverse，但posed组件可能没有自动监听这个props的变化来调整动画状态，导致首次回退时动画逻辑错位。

具体修复方案 #

1. 强制PoseGroup在reverse变化时重新初始化 #

给PoseGroup添加包含reverse的key，当reverse从false切换到true时，强制PoseGroup重新挂载，确保所有pose相关配置都是最新的：

export const AnimatedSwitch = ({ location, children, ...rest }) => {
  const clickedBack = useSelector(state => state.interfaceReducer.clickedBack);
  const routePopped = useSelector(state => state.routeReducer.routePopped);
  const reverse = clickedBack || routePopped;
  const onRest = () => {
    clickedBack && dispatch(toggleClickedBackButton(false));
    // 别忘了重置routePopped状态（如果你还没做的话）
    routePopped && dispatch(resetRoutePopped()); 
  }
  return (
    <PoseGroup 
      animateOnMount={true} 
      preEnterPose={reverse ? "leftSide" : "rightSide"} 
      exitPose={reverse ? "rightSide" : "leftSide"} 
      onRest={onRest} 
      reverse={reverse}
      key={`pose-group-${reverse}`} // 新增key触发重新渲染
    >
      <ContextRouteAnimation 
        poseKey={`${reverse}-${location.pathname}`} 
        key={location.pathname} 
        reverse={reverse}
      >
        <Switch location={location} {...rest}>
          {children}
        </Switch>
      </ContextRouteAnimation>
    </PoseGroup>
  )
}

2. 手动控制ContextRouteAnimation的pose状态 #

把pose直接通过props传递给ContextRouteAnimation，绕过PoseGroup的preEnter/exit逻辑，让动画状态更可控：

// 在AnimatedSwitch中修改ContextRouteAnimation的渲染
<ContextRouteAnimation 
  pose={reverse ? "leftSide" : "rightSide"} // 直接传递当前应该使用的pose
  key={location.pathname}
  reverse={reverse}
>
  <Switch location={location} {...rest}>
    {children}
  </Switch>
</ContextRouteAnimation>

同时调整ContextRouteAnimation的配置，确保它能响应pose props的变化：

const ContextRouteAnimation = posed.div({
  enter: {
    opacity: 1,
    x: "0%",
    transition: {
      type: "tween",
      ease: "easeInOut",
      duration: TIMING.SLOW,
    },
  },
  leftSide: {
    x: "-100%",
    opacity: 0,
    transition: {
      type: "tween",
      ease: "easeInOut",
      duration: TIMING.SLOW,
    },
    transitionEnd: { x: "0%", opacity: 1 } // 确保进入后回到正常状态
  },
  rightSide: {
    x: "100%",
    opacity: 0,
    transition: {
      type: "tween",
      ease: "easeInOut",
      duration: TIMING.SLOW,
    },
    transitionEnd: { x: "0%", opacity: 1 }
  },
});

3. 确保Redux状态及时重置 #

检查routePopped状态是否在动画结束后被正确重置，如果没有，需要在onRest回调中添加对应的重置逻辑，避免后续路由操作受到旧状态的影响。

验证思路 #

先尝试第一种方案（给PoseGroup加key），这是最容易验证的，通常能解决状态不同步导致的首次动画异常问题。如果还是不行，再尝试手动控制pose状态的方案。

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