效果如下

官网安装对应的插件

创建对应的样式

.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"><CSSTransitionkey={location.pathname}timeout={300}classNames="fade"nodeRef={nodeRef}><div ref={nodeRef} className="fade">{currentOutlet}</div></CSSTransition></SwitchTransition>

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