react-transition-group v2 和 react-router-dom v4。 为什么动画会同时更改内部和外部组件中的数据？

Question

我有一个简单的代码测试台，在那里我们可以看到react-transition-group .v2 如何在通过react-router-dom v4 的路径之间导航动画中异常工作。

测试台： https : //codesandbox.io/s/oxkw5prm56?from-embed

通常，此代码只是输出当前单击路径的文本string ，然后将其放入页面正文中。

但是react-transition-group .v2 给我的一件奇怪的事情是，当路径发生变化并且新文本被放置在前一个文本消失之前- 前一个文本字符串将自己的内容替换为新的。 因此，如您所知，单击任何路径后，我们有两个相似文本字符串的场景，这是不正确的。

有人知道为什么会这样吗？ 谢谢

Answer 1

这是因为您忘记了新的 Transition API 是什么。 在新的 v4 中，它使用history对象中的location属性（从import { syncHistoryWithStore } from 'react-router-redux' ）来建议动画应该如何更新组件。

因此，在这种情况下，您的收据通常是下一个：

在App组件中，在Switch部分添加location prop：

const App = withRouter(({ location }) => (
  <div>
    ....
    <TransitionGroup>
      <CSSTransition
        key={location.key}
        classNames='fade'
        timeout={1000}
      >
        <Switch location={location}> // this string is updated!
          <Route exact path='/' component={Home} />
          <Route exact path='/other' component={Other} />
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  </div>
))