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中，它使用了columnVisible对象中的location道具（从history接收）来建​​议动画应如何更新组件。

因此，通常情况下，您的收据可以是下一个：

在import { syncHistoryWithStore } from 'react-router-redux'组件中的App部分中添加location道具：

Switch