reactjs - React Router + React Pose 以“POP”或“PUSH”方向滑入/滑出

Question

我已经有这个问题一个多月了，一遍又一遍地用新的想法回到它，但我无法解决解决方案。必须有一个，这是微不足道的！

我的目标是通常从左滑入页面并向右滑出。当它反转时（用户单击后退按钮或历史记录通知已弹出路线），页面应向右退出，下一条路线应从左侧（相反）进入。

一切正常，但是当我 PUSH 一条路线然后 POP 一条路线时，下一页将向右退出并从右侧进入。进入页面在有时间更新之前使用旧姿势。如果我再弹出一次，它就会正常工作，新页面从左侧滑动，而旧页面从右侧退出。这只是我第一次使用 POP 进行更改。我非常依赖 const reverse 值。该组件仅在我更改路由时呈现一次，并且在我第一次单击 POP 时 reverse = true。

我有一个像这样的 AnimatedSwitch 组件

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));
  }
    return (
        <PoseGroup
            animateOnMount={true}
            preEnterPose={reverse ? "leftSide" : "rightSide"}
            exitPose={reverse ? "rightSide" : "leftSide"}
            onRest={onRest}
            reverse={reverse}
        >
            <ContextRouteAnimation poseKey={`${reverse}-${location.pathname}`} key={location.pathname} reverse={reverse}>
                <Switch location={location} {...rest}>
                    {children}
                </Switch>
            </ContextRouteAnimation>
        </PoseGroup>
    )
}

这是 ContextRouteAnimation 姿势组件：

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,
        },
    },
    rightSide: {
        x: "100%",
        opacity: 0,
        transition: {
            type: "tween",
            ease: "easeInOut",
            duration: TIMING.SLOW,
        },
    },
});

我尝试了多种方法，例如

• 将反向传递给 ContextRouteAnimation 并使用 preEnter + exit 姿势。
• 直接在 ContextRouteAnimation 上设置姿势
• 将组件存储为状态，仅在更新新姿势后更新它，然后触发另一个渲染

标签： reactjsanimationreact-routertransitionreact-pose