React过渡不会触发最后一条路线

编程问答 2022-06-12

问题描述

我正在使用React转换组和React路由器dom创建页面转换，这与我数组中的最后一条路由相去甚远，我将在下面记录我的代码。这是我创建路线的方式。

{routes.map(({ path,name,Component,enter,exit}) => (
  <Route key={name} path={path} exact>

    {({ match }) => (
     <Csstransition
        in={match != null}
        timeout={1650}
        classNames='page'
        unmountOnExit
        onExit={(props) => onExit(props,exit)}
        onEnter={(props) => onEnter(props,enter)}>

        <Component path={path} />

      </Csstransition>
    )}

  </Route>
))}

这是我构建路线数组的方式。我只列出了证明此问题的路线。它们都使用相同的组件，因为它们是同一页面，只是具有不同的信息和图像。

const routes = [
  { path: '/work/ep1',name: 'ep1',Component: SingleWork,enter: 's_work_enter',exit: 's_work_exit' },{ path: '/work/ep2',name: 'ep2',{ path: '/work/ep3',name: 'ep3',{ path: '/work/ep4',name: 'ep4',{ path: '/work/ep5',name: 'ep5',{ path: '/work/ep6',name: 'ep6',];

我提供了用于进入和退出的值，因为我正在根据要转换的页面更改转换效果。

下面是处理我的退出过渡的代码，我认为这并不重要，但我想最好也提供它。

  const onExit = (node,exit) => {

    if (exit === 's_work_exit') {

      gsap.timeline()
        .set(pageRef.current,{css:{className: '+=grey-video page'}})
        .to(node.children[0].children['single-work--video-container'].children.videoBigPlayBtn,0.1,{  opacity: 0 })
        .to(node.children[0].children['single-work--video-container'].children[0],0.8,{  scaleX:0.9,scaleY:0.9,rotate: 1,ease: "circ.inOut" })
        .to(node.children[0].children['single-work--info-container'].children['single-work--info-next'].children['single-work--next-container'],{opacity: 0},'-=0.3')
    }
  };

在每个页面上都有指向下一页的链接，因此，如果您位于路径：“ / work / ep1”，则该链接指向路径：“ / work / ep2”，依此类推。

这很好，直到您到达数组的最后一页，即路径：'/ work / ep6'，它链接回路径：'/ work / ep1'-在这种情况下，退出动画不会触发，并且页面只是立即退出，这是我不知道的问题。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-routerreact-transition-groupreactjsreactjsreactjsreactjs