react18+react-transition-group实现路由切换过度

效果如下

官网安装对应的插件

创建对应的样式

.fade-enter {
  opacity: 0;
}
.fade-exit {
  opacity: 1;
}
.fade-enter-active {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
}
.fade-enter-active,
.fade-exit-active {
  transition: opacity 500ms;
}

  const location = useLocation();
  const currentOutlet = useOutlet();
  const nodeRef = useRef(null);

            {/* 二级路由 */}
            <SwitchTransition mode="out-in">
              <CSSTransition
                key={location.pathname}
                timeout={300}
                classNames="fade"
                nodeRef={nodeRef}
              >
                <div ref={nodeRef} className="fade">
                  {currentOutlet}
                </div>
              </CSSTransition>
            </SwitchTransition>

原先项目中我的nodeRef引用是放路由表中每一项，然后每次进入页面的时候，遍历路由表取当前路由的nodeRef属性，这次我发现直接创建nodeRef就可以（原先是想每一个路由进入创建唯一的一个ref实例），这里必须有ref，否则控制台报错。