如何在点击浏览器后退按钮时禁用页面CSS过渡动画

核心思路是通过追踪导航动作类型区分主动跳转（点击链接）和浏览器后退/前进（POP动作），按需启用过渡动画：

1. 新增状态与历史监听 #

在App组件中添加状态控制动画开关，并监听路由变化判断动作类型：

import React, { useEffect, useState }  from 'react';
import {Route, NavLink, Switch, useHistory } from "react-router-dom";
import './App.css';
import Home from './Home';
import About from './About';
import { CSSTransition, TransitionGroup,} from 'react-transition-group';

const usePageMeta = (title, description) =>{
  const defaultTitle = "app-name";
  const defaultDesc = "meta description";
  
  useEffect(() => {
        document.title = title || defaultTitle;
                document.querySelector("meta[name='description']").setAttribute("content", description || defaultDesc);
           }, [defaultTitle, title, defaultDesc, description]);
       };

const App = () =>{
  const history = useHistory();
  const [shouldAnimate, setShouldAnimate] = useState(true);

  // 监听路由动作，后退/前进时关闭动画
  useEffect(() => {
    const unlisten = history.listen((_, action) => {
      if (action === 'POP') {
        setShouldAnimate(false);
        // 后退后恢复下一次主动跳转的动画能力
        setTimeout(() => setShouldAnimate(true), 100);
      }
    });
    return unlisten;
  }, [history]);

  return (
    <div className="App">
      <div className="nav fixed top-0 left-0 z-10 w-full">
        {/* 点击链接时开启动画 */}
        <NavLink 
          exact to="/" 
          activeClassName="active"
          onClick={() => setShouldAnimate(true)}
        >Home</NavLink>
        <NavLink 
          to="/about"  
          activeClassName="active"
          onClick={() => setShouldAnimate(true)}
        >About</NavLink>
      </div>

      <Route render={({location}) => (
        <TransitionGroup>
          {/* 根据状态决定是否启用过渡 */}
          {shouldAnimate ? (
            <CSSTransition
              key={location.key}
              timeout={1000}
              classNames="fade"
            >
              <Switch location={location}>
                <Route exact path="/">
                  <Home usePageMeta={usePageMeta}/>
                </Route>
                <Route path="/about">
                  <About usePageMeta={usePageMeta}/>
                </Route>
              </Switch>
            </CSSTransition>
          ) : (
            {/* 后退时直接渲染组件，无过渡动画 */}
            <Switch location={location}>
              <Route exact path="/">
                <Home usePageMeta={usePageMeta}/>
              </Route>
              <Route path="/about">
                <About usePageMeta={usePageMeta}/>
              </Route>
            </Switch>
          )}
        </TransitionGroup>
      )} />
    </div>
  );
}

export default App;

2. 关键逻辑说明 #

• 通过history.listen监听路由动作：action === 'POP'对应浏览器后退/前进操作，此时关闭动画开关。
• 点击内部NavLink时主动开启动画开关，确保主动跳转时正常触发过渡。
• 后退后通过setTimeout恢复动画开关，避免后续主动跳转无法触发动画。
• 无动画时直接渲染Switch组件，让浏览器默认的滚动位置恢复机制正常工作。

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