使用TransitionGroup进行动画时，componentDidMount会触发两次

Question

我目前正在使用react-transition-group与react-router-dom一起设置路线更改的动画，这很正常。

我遇到的唯一问题是，当切换路由并且我需要在componentDidMount生命周期挂钩中发送或获取某些数据时，它会发生两次火灾。我很确定这是由react-transition-group引起的，但我想知道这个问题是否有明显的解决方案。

我发现这是因为它在数据库中插入了两次实体，这远远不是预期的行为。

登录componentDidMount 的过渡示例

Answer 1

我发现这是我的Switch组件问题，see this github issue

基本上，您需要location组件中的Switch道具。

Answer 2

这是github问题的摘录，因此您无需单击。

将位置添加到交换机：<Switch location={location}>

<TransitionGroup component="main">
  <CSSTransition
    key={location.pathname}
    timeout={timeout}
    exit={false}
    classNames="fade">
    <Switch location={location}> // <- Here it is!
      <Route exact path="/" component={Home} />
      <Route path="/blog" component={BlogList} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
      <Route component={NotFound} />
    </Switch>
  </CSSTransition>
</TransitionGroup>