React重构网站：Router与Transition Group适配折叠面板布局的最佳实践咨询

嘿，我完全懂你遇到的这个问题——那种每个导航项对应一个可以滑入滑出的独立内容区块的布局，和React Router官方文档里那种单容器切换的场景完全不一样。我之前在重构自己的个人站时也碰到过一模一样的需求，给你分享几个亲测好用的最佳实践：

核心思路：把每个路由内容块变成独立的Transition单元 #

官方方案是把所有路由塞进一个<TransitionGroup>，但你的场景里每个区块是独立的，所以要反过来——给每个路由对应的内容组件单独套<CSSTransition>，同时用React Router的状态来控制动画触发，让路由切换和区块的展开/收起动画完全绑定。

1. 用useLocation和useParams跟踪路由状态 #

首先，你需要监听当前路由，来判断哪个区块该激活并执行动画。这里假设你的路由配置是动态路由（比如/:section），或者多个固定路由（/about、/projects等），示例代码如下：

import { Link, useParams } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';

function App() {
  const { section } = useParams(); // 获取当前路由的区块标识，比如about/projects

  return (
    <div className="app-container">
      {/* 导航栏：每个链接对应一个路由 */}
      <nav className="site-nav">
        <Link to="/about">关于我</Link>
        <Link to="/projects">我的项目</Link>
        <Link to="/contact">联系方式</Link>
      </nav>

      {/* 每个内容区块单独绑定过渡动画 */}
      <CSSTransition
        in={section === 'about'}
        timeout={500}
        classNames="slide-down"
        unmountOnExit
        mountOnEnter
      >
        <section className="content-block about-block">
          {/* 关于我区块内容 */}
        </section>
      </CSSTransition>

      <CSSTransition
        in={section === 'projects'}
        timeout={500}
        classNames="slide-down"
        unmountOnExit
        mountOnEnter
      >
        <section className="content-block projects-block">
          {/* 项目区块内容 */}
        </section>
      </CSSTransition>

      {/* 其他区块同理 */}
    </div>
  );
}

2. 编写对应的CSS过渡样式 #

这里的slide-down类要对应CSSTransition提供的四个状态类：-enter、-enter-active、-exit、-exit-active，同时要给内容区块设置定位避免布局跳动：

/* 滑入滑出动画核心样式 */
.slide-down-enter {
  transform: translateY(-100%);
  opacity: 0;
}

.slide-down-enter-active {
  transform: translateY(0);
  opacity: 1;
  transition: all 500ms ease-in-out;
}

.slide-down-exit {
  transform: translateY(0);
  opacity: 1;
}

.slide-down-exit-active {
  transform: translateY(-100%);
  opacity: 0;
  transition: all 500ms ease-in-out;
}

/* 内容区块基础样式：避免重叠时的布局冲突 */
.content-block {
  position: absolute;
  top: 60px; /* 对应导航栏的高度 */
  left: 0;
  right: 0;
  min-height: calc(100vh - 60px);
  background: #fff;
}

3. 进阶：适配路由前进/后退的不同动画 #

如果想让路由前进和后退有差异化动画（比如前进向下滑，后退向上滑），可以用useHistory监听路由操作类型：

import { useHistory, useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

function App() {
  const { section } = useParams();
  const history = useHistory();
  const [isGoingBack, setIsGoingBack] = useState(false);

  useEffect(() => {
    const unlisten = history.listen((_, action) => {
      // POP操作对应浏览器后退/前进按钮触发的路由切换
      setIsGoingBack(action === 'POP');
    });
    return unlisten;
  }, [history]);

  // 根据路由方向切换动画类
  const transitionClass = isGoingBack ? 'slide-up' : 'slide-down';

  return (
    // ... 导航栏部分不变
    <CSSTransition
      in={section === 'about'}
      timeout={500}
      classNames={transitionClass}
      unmountOnExit
      mountOnEnter
    >
      <section className="content-block about-block">
        {/* 内容 */}
      </section>
    </CSSTransition>
    // ... 其他区块同理
  );
}

对应的slide-up样式只需要把translateY的方向反过来即可。

4. 性能优化：用unmountOnExit减少DOM节点 #

这个属性可以让未激活的区块在退出动画完成后自动卸载，减少页面DOM节点数量；配合mountOnEnter确保只有当前激活的区块才会被挂载，既节省资源又避免不必要的渲染。

注意事项 #

• 路由配置要和区块对应：如果用动态路由，确保/:section的参数能准确匹配每个区块的标识；如果用固定路由，就直接判断location.pathname是否等于目标路由。
• 内容区块的定位要准确：推荐用absolute让所有区块重叠在同一位置，避免切换时的布局跳动。
• 支持多区块同时展开：如果需要允许用户展开多个区块，可以把路由改成查询参数（比如/?sections=about,projects），用状态管理工具（比如Context或Redux）来控制多个区块的动画状态。

这个方案我自己在个人站里用过，完全适配你说的那种展开式布局，过渡效果顺滑，而且和React Router的路由状态完全同步，不会出现路由和动画不一致的问题。

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