前言

路由切换是项目中必备的一个东西，但原始的路由切换往往比较生硬，本文将通过react-transition-group包实现react-router的路由切换过度效果

依赖安装

npm install react-transition-group

使用上比较简单 通过react-transition-group库里的几个组件包裹住路由组件即可

包裹路由组件

由于本文使用的是react-router V7数据路由模式 所以并没有Routes，Route等组件,如果用的是低版本的路由则包裹Routes等组件即可，例子中是包裹子路由渲染出口Outlet组件

import { CSSTransition, SwitchTransition } from 'react-transition-group'
import {
    useNavigate,
    useLocation,
    useNavigation,
    useOutlet,
} from 'react-router-dom'
import {useRef} from 'react'

export const Layout  = ()=>{
    const curOutlet = useOutlet()
    const location = useLocation()
    const nodeRef = useRef(null)

    return (
        <>
            <SwitchTransition mode='out-in'>
                <CSSTransition
                    key={location.pathname}
                    timeout={500}
                    nodeRef={nodeRef}
                    classNames='fade'
                    unmountOnExit
                >
                    <div ref={nodeRef}>
                        <Suspense fallback={<LoadingFallback />}>
                            {curOutlet}
                        </Suspense>
                    </div>
                </CSSTransition>
            </SwitchTransition>
        </>
    )
}
const curOutlet = useOutlet()

然后定制一个css样式，以classNames的值命名

注意：这里样式不能写在cssModule里，因为cssModule会给样式添加上随机字符串，会导致react-transition-group无法正确的识别类名

css样式

.fade-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s;
}

.fade-exit {
  opacity: 1;
  transform: translateX(0);
}

.fade-exit-active {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.5s;
}

这里我们把样式放在了index.css中，我们设置的类名是fade，react-transition-group会自动在fade后面拼上对应的过程名字

进入（enter）阶段：

• enter: 进入开始状态（在进入动画开始前的一帧）
• enter-active: 进入激活状态（整个进入动画过程）

退出（exit）阶段：

• exit: 退出开始状态（在退出动画开始前的一帧）
• exit-active: 退出激活状态（整个退出动画过程）

整体的使用就是这样，下面说几个注意事项：

1. 为什么要使用useOutlet而不是直接使用<Outlet/>
   1. 使用SwitchTransition和 CSSTransition包裹<Outlet/>会导致离开动画失效，并且页面会闪烁
2. 为什么要使用nodeRef
   1. 本文的实例使用了react19，react-transition-group使用了废弃的ReactDOM.findDOMNode，如果是react19以下版本可以忽略这个属性
3. 为什么要使用Suspense包裹
   1. 因为组件时懒加载的，所以在切换路由的时候如果时间过长会出现白屏的问题，这里使用Suspense包裹住子路由的渲染出口可以防止整个页面白屏。

结语

以上就是react-transition-group的整体使用过程，注意几个事项即可