v6路由切换动画实现踩坑：过渡效果不生效原因分析

在React Router v6升级过程中，路由切换动画实现是一个常见但容易踩坑的问题。本文将详细分析过渡效果不生效的原因及解决方案。

问题现象 在v6版本中，使用useNavigate进行路由跳转时，页面切换没有预期的过渡动画效果。即使配置了CSSTransition组件，动画依然无法正常触发。

核心原因分析

1. 组件结构问题：v6中Route组件必须包裹在Routes组件内，如果直接使用Switch会导致动画组件无法正确挂载
2. key属性缺失：CSSTransition需要通过key属性来识别路由变化
3. 动画组件位置不当：过渡组件应放在路由容器的外层

可复现步骤

// ❌ 错误写法
<Routes>
  <Route path="/" element={<Home />} />
</Routes>

// ✅ 正确写法
<CSSTransitionGroup>
  <Switch key={location.pathname} location={location}>
    <Route path="/" element={<Home />} />
  </Switch>
</CSSTransitionGroup>

解决方案 建议使用useLocation hook配合CSSTransition组件，并确保外层容器正确设置key属性。如果仍不生效，检查CSS类名是否正确匹配，以及过渡时间设置是否合理。

最佳实践

1. 统一管理动画组件位置
2. 确保路由组件层级正确
3. 合理设置动画时长和缓动函数