React Router + React Pose слайд в / из с направлением "POP" или "PUSH"

Question

У меня была эта проблема больше месяца, я снова и снова возвращался к ней с новыми идеями, но я не могу обернуться вокруг решения. Там должен быть один, это тривиально!

Моя цель - как обычно сдвигать страницы слева и скользить вправо. Когда он переворачивается (пользователь нажимает кнопку "Назад" или история замечает, что маршрут был извлечен), страница должна выйти вправо, а следующий маршрут - слева (напротив).

Все работает, но когда я нажимаю на маршрут, а затем POP на маршрут, следующая страница будет выходить справа и входить справа. Страница входа использует старую позу, прежде чем она успеет обновиться. Если я POP в другой раз, то он работает правильно, и новая страница скользит слева, а старая страница выходит вправо. Это только первый раз, когда я меняюсь с POP. Я очень зависим от константного обратного значения. Компонент рендерится только один раз, когда я изменяю route и reverse = true при первом нажатии кнопки POP.

У меня есть компонент 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 + выход из положения.
• Установите позу непосредственно на ContextRouteAnimation
• Сохранить компонент как состояние и обновлять его только после обновления новой позы, а затем запускать другой рендер