如何在Modernize React MUI Dashboard中用Material-UI Slide实现页面平滑过渡

要实现页面间的平滑滑动过渡，核心是监听路由变化并触发MUI Slide组件的动画。以下是适配你现有代码的实现方案：

核心思路 #

1. 监听路由路径变化，触发动画状态切换
2. 用Slide组件包裹所有路由内容，控制滑入滑出时机
3. 配合React Router的路由匹配逻辑，确保动画与路由切换同步

完整代码实现（React Router v5） #

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch, useLocation } from 'react-router-dom';
import { Slide } from '@mui/material';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

// 封装带过渡动画的路由容器
const AnimatedRoutes = () => {
  const location = useLocation();
  const [isAnimating, setIsAnimating] = useState(true);

  // 路由变化时触发动画流程：先滑出旧页面，再滑入新页面
  useEffect(() => {
    setIsAnimating(false);
    // 延迟时间需与Slide的timeout保持一致
    const timer = setTimeout(() => setIsAnimating(true), 300);
    return () => clearTimeout(timer);
  }, [location.pathname]);

  return (
    <Slide
      direction="right" // 可修改为left/up/down调整滑动方向
      in={isAnimating}
      timeout={300} // 动画时长，单位ms
      mountOnEnter // 动画开始后再挂载新页面组件
      unmountOnExit // 动画结束后卸载旧页面组件
    >
      <div style={{ width: '100%' }}>
        <Switch location={location}>
          <Route path="/" exact component={HomePage} />
          <Route path="/about" component={AboutPage} />
        </Switch>
      </div>
    </Slide>
  );
};

const App = () => {
  return (
    <Router>
      {/* 这里放置你的侧边栏组件，菜单按钮用<Link to="/xxx">跳转即可 */}
      <AnimatedRoutes />
    </Router>
  );
};

export default App;

React Router v6 适配版本 #

如果你的项目用的是React Router v6，只需调整路由匹配部分：

import { Routes, Route, useLocation } from 'react-router-dom';

const AnimatedRoutes = () => {
  const location = useLocation();
  const [isAnimating, setIsAnimating] = useState(true);

  useEffect(() => {
    setIsAnimating(false);
    const timer = setTimeout(() => setIsAnimating(true), 300);
    return () => clearTimeout(timer);
  }, [location.pathname]);

  return (
    <Slide
      direction="right"
      in={isAnimating}
      timeout={300}
      mountOnEnter
      unmountOnExit
    >
      <div style={{ width: '100%' }}>
        <Routes location={location}>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    </Slide>
  );
};

关键细节说明 #

• 动画同步：useEffect监听路由变化，先将isAnimating设为false触发旧页面滑出，延迟后设为true触发新页面滑入，延迟时间必须与Slide的timeout一致。
• 组件生命周期控制：mountOnEnter和unmountOnExit确保组件只在动画阶段正确挂载/卸载，避免页面重叠或布局错乱。
• 侧边栏触发：侧边栏的菜单按钮直接使用React Router的<Link>组件跳转路由即可，路由变化会自动触发过渡动画，无需额外绑定事件。
• 自定义方向：可根据需求修改direction属性，比如从左滑入用left，从下往上用up，甚至可以根据当前路由动态切换方向（比如返回首页时用反向滑动）。

内容的提问来源于stack exchange，提问作者Hitesh Chauhan