react 路由切换页面渲染两次

用react 开发时，我们一般会写一个layout层，同事在layout层做了动画，大致代码如下

<TransitionGroup className={styles['route-ani-wrap']} childFactory= {this._getChild}> <CSSTransition key={location.pathname} timeout={300}> {children} </CSSTransition> </TransitionGroup>

效果挺好，不过这里要说的是其产生的齐天大坑。

我们项目是采用umi创建的，根据官方文档实现的ssr 。上面动态效果导致了服务端获取数据方法getInitialProps执行两次的现象。我打了debugger, 发现渲染了两个对象，渲染界面如图：

故猜测实现动画的插件渲染了两个实例，导致getInitialProps执行了两次。