react react-router V6 路由切换实现过渡动画

React Router v6 提供了一种新的基于 hooks 的路由管理方式，其中 `useRoutes` 和 `Link` 组件可以方便地实现路由切换。为了添加过渡动画效果，你可以利用 React 的内置功能结合 CSS 或第三方库如 `react-transition-group`。

首先，安装所需的依赖：

npm install react-transition-group

然后，在组件中使用 `TransitionGroup` 或 `CSSTransition`（推荐后者，因为它更直观）：

import { Link as RouterLink, useLocation } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';

const routes = [
  // ...定义你的路由配置
];

function App() {
  const location = useLocation();

  return (
    <div className="router-container">
      <nav>
        {/* 使用带有额外类名的 Link */}
        <ul>
          {routes.map((route) => (
            <li key={route.path}>
              <RouterLink
                to={route.path}
                exact
                activeClassName="active"
                onClick={() => handleRouteChange(location, route)}
              >
                {route.name || route.path}
              </RouterLink>
            </li>
          ))}
        </ul>
      </nav>

      <main>
        {/* 使用 CSSTransition 包裹内容 */}
        <CSSTransition
          in={location.pathname === routes[0].path} // 初始状态只显示第一条路由的内容
          timeout={500} // 动画持续时间
          classNames={{
            enter: 'slide-in',
            enterActive: 'animated slideInRight',
            leave: 'slide-out',
            leaveActive: 'animated slideOutLeft',
          }}
        >
          {({ children }) => children}
        </CSSTransition>
      </main>
    </div>
  );

  function handleRouteChange(prevLocation, newRoute) {
    // 清除上一条路由的动画
    setTimeout(() => {
      if (prevLocation.pathname !== newRoute.path) {
        // 根据新路由更新动画状态
        setPrevLocation(newRoute);
      }
    }, 0);

    // 更改路由
    history.push(newRoute.path);
  }

  // 如果需要记住前一个路由以便回退动画
  const [prevLocation, setPrevLocation] = useState(location);
}

// 定义动画样式
.slide-in {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.slide-in.animated {
  opacity: 1;
  transform: translateX(0);
}

.slide-out {
  opacity: 1;
  transform: translateX(-100%);
}

.slide-out.animated {
  opacity: 0;
  transform: translateX(100%);
}

在这个例子中，当用户点击导航链接时，会触发 `handleRouteChange` 函数，它会在新的路由加载完成后再清除旧的过渡效果。通过设置合适的 CSS 类名，你可以创建各种类型的过渡动画，比如滑入、滑出、淡入淡出等。