react中路由使用v6的版本，监听路由改变实现动画效果

1.先下载react-transtion-group动画的第三方包 2.导入 import { CSSTransition } from 'react-transition-group'; 3.用 CSSTransition包裹组件内容 <CSSTransition in={aaaa} // 控制动画的进入/退出状态 appear={true} // 初始显示时也应用动画（可选） timeout={30000} // 动画的时间（单位：毫秒） classNames="fade" // 定义动画的CSS类前缀 unmountOnExit // 组件退出后移除DOM节点 > </CSSTransition> 4.监听路由变化,改变in的值 import { useNavigate,useMatch } from 'react-router-dom' const match = useMatch('/palogin'); const [aaaa,seta] = useState(false) useEffect(()=>{ if(match.pathname==='/palogin'){ seta(true) } },[match.pathname]) 5.根据fade前缀，实现效果 `.fade-enter { opacity: 0; }

.fade-enter-active {
    opacity: 1;
    transition: all 30000ms;
}
/* 定义组件退出效果 */
.fade-exit {
    opacity: 1;
}
.fade-exit-active {
    opacity: 0;
    transition: all 30000ms;
}`