v6版本升级后路由跳转动画效果记录

Luna487 +0/-0 0 0 正常 2025-12-24T07:01:19 React Router

React Router v6升级后，路由跳转动画效果的实现成为了一个重要的话题。在v6版本中，由于Route组件的重构，传统的路由动画实现方式需要重新思考。

首先，我们需要使用useNavigate Hook来处理程序化导航。在v6中，history.push()被navigate()替代，这是实现动画跳转的基础。以下是一个基础的动画跳转示例：

import { useNavigate } from 'react-router-dom';

const NavigationButton = () => {
  const navigate = useNavigate();
  
  const handleNavigation = () => {
    navigate('/target-path');
  };
  
  return (
    <button onClick={handleNavigation}>跳转</button>
  );
};

为了实现流畅的路由动画，我们通常会结合CSS过渡效果。在v6中，建议使用useLocation配合CSS来控制动画时机：

import { useLocation } from 'react-router-dom';

const AnimatedRoute = () => {
  const location = useLocation();
  
  return (
    <div className="route-transition" key={location.pathname}>
      {/* 路由内容 */}
    </div>
  );
};

在CSS中定义过渡效果：

.route-transition {
  transition: opacity 0.3s ease-in-out;
}

.route-transition-enter {
  opacity: 0;
}

.route-transition-enter-active {
  opacity: 1;
}

实际应用中，建议使用react-transition-group库来管理复杂的动画状态。通过自定义Hook封装动画逻辑，可以提高代码复用性，同时保持路由跳转的流畅体验。