Javascript React TransitionGroup-检测并取消正在进行的转换

我的应用程序有多个标签为“红色”、“绿色”、“蓝色”和“粉色”的页面。为了允许用户在页面之间导航，我使用React Router（v5.2.0）。路由被包装在TransitionGroup（v4.4.1）中，因此当用户导航到新页面时，会对页面应用淡入过渡效果，使其慢慢淡入视图。此转换的持续时间为5000ms

**问题**

应用程序在“红色”页面上初始化。假设用户单击“蓝色”页面，然后单击“粉色”页面，而蓝色的转换仍在进行中。在本例中，我希望取消Blue的转换，并立即显示粉红色页面，而不对其应用任何转换效果

**尝试的解决方案**

我当前的解决方案使用标志和条件渲染：

class AnimationApp extends React.Component {
  constructor(props) {
    super(props);
    this.updateProgress = this.updateProgress.bind(this);
  }

  // Flag
  inProgress = false;
  updateProgress() {
    return (this.inProgress = !this.inProgress);
  };

  render() {
    const { location } = this.props;
    let currentRoute = (
      <Switch location={location}>
        <Route path="/hsl/:h/:s/:l" children={<HSL />} />
        <Route path="/rgb/:r/:g/:b" children={<RGB />} />
      </Switch>
    );
  
    // Conditional render
    if (this.inProgress) {
      updateProgress();
    } else {
      currentRoute = (
        <TransitionGroup>
          <CSSTransition
            key={location.key}
            classNames="fade"
            timeout={5000}
            onEnter={this.updateProgress}
            onEntered={this.updateProgress}
          >
            {currentRoute}
          </CSSTransition>
        </TransitionGroup>
      );
    }
  
    return (
      <div style={styles.fill}>
        <ul style={styles.nav}>
          <NavLink to="/hsl/10/90/50">Red</NavLink>
          <NavLink to="/hsl/120/100/40">Green</NavLink>
          <NavLink to="/rgb/33/150/243">Blue</NavLink>
          <NavLink to="/rgb/240/98/146">Pink</NavLink>
        </ul>
  
        <div style={styles.content}>{currentRoute}</div>
      </div>
    );
  }
  
}

AnimationApp = withRouter(AnimationApp)

如果在蓝色过渡结束之前单击蓝色，然后单击粉色，则粉色渲染两次。在第一次渲染时，它会立即显示，没有任何过渡，但在第二次渲染时，它会显示过渡。是什么导致了双重渲染

function AnimationApp() {
  let location = useLocation();

  // Flag
  let inProgress = false;
  const updateProgress = function () {
    return (inProgress = !inProgress);
  };

  let currentRoute = (
    <Switch location={location}>
      <Route path="/hsl/:h/:s/:l" children={<HSL />} />
      <Route path="/rgb/:r/:g/:b" children={<RGB />} />
    </Switch>
  );

  // Conditional render
  if (inProgress) {
    updateProgress();
  } else {
    currentRoute = (
      <TransitionGroup>
        <CSSTransition
          key={location.key}
          classNames="fade"
          timeout={5000}
          onEnter={updateProgress}
          onEntered={updateProgress}
        >
          {currentRoute}
        </CSSTransition>
      </TransitionGroup>
    );
  }

  return (
    <div style={styles.fill}>
      <ul style={styles.nav}>
        <NavLink to="/hsl/10/90/50">Red</NavLink>
        <NavLink to="/hsl/120/100/40">Green</NavLink>
        <NavLink to="/rgb/33/150/243">Blue</NavLink>
        <NavLink to="/rgb/240/98/146">Pink</NavLink>
      </ul>

      <div style={styles.content}>{currentRoute}</div>
    </div>
  );
}