v6路由跳转动画实现踩坑：过渡效果配置错误分析

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

问题背景

React Router v6相较于v5在API设计上做了重大调整，其中最明显的就是不再支持<Route>组件的component属性，而是使用element属性来渲染组件。这导致许多开发者在实现路由跳转动画时遇到了配置错误。

常见错误配置

// 错误示例
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

正确实现方案

要实现路由跳转动画，需要结合useLocation和CSSTransition组件。以下是完整实现步骤：

安装依赖：npm install react-transition-group
创建过渡组件：

import { useLocation } from 'react-router-dom';
import { CSSTransition, SwitchTransition } from 'react-transition-group';

function App() {
  const location = useLocation();
  
  return (
    <SwitchTransition>
      <CSSTransition
        key={location.pathname}
        timeout={300}
        classNames="fade"
      >
        <Routes location={location}>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </CSSTransition>
    </SwitchTransition>
  );
}

CSS样式配置

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}