React CSSTransition with Route首先渲染下一页，然后再次渲染下一页面

Question

从渲染Products的状态开始。

我希望上面的Products带动画退出，单击Products视图中存在的NavLink to={'/product-detail/' + variant.id}时出现ProductDetailPhotos，但是，首先上面的Products被新的ProductDetailPhotos替换，然后出现新的另一个ProductDetailPhotos。

<TransitionGroup component="main" className="page-main">
<CSSTransition key={location.pathname} timeout={timeout} classNames="fade" appear>
<Switch location={location}>
<Route exact path={'/'} component={ () =>
<Products
productsArray={this.state.myProductsArray}
client={this.props.client}
/>
}/>
<Route path='/product-detail/:variantId' render={props =>
<ProductDetailPhotos
products={this.state.products}
client={this.props.client}
addVariantToCart={this.addVariantToCart}
{...props}
/>
}/>
<Route component={NotFoundPage} />
</Switch>
</CSSTransition>
</TransitionGroup>

我按时间序列解释实际情况如下：

1. Products DOM已渲染
2. 单击导航链接至/产品详细信息
3. Products DOM立即变为具有淡出退出类的ProductDetailPhotos 1 DOM，然后呈现具有淡出出现类的ProductDetailPhotos 2 DOM
4. CCD_ 13和CCD_。ProductDetailPhotos 1 DOM设置动画以退出，ProductDetailPhotos 2 DOM设置动画以进入
5. ProductDetailPhotos 1 DOM最终消失

我的期望如下：

1. Products DOM已渲染
2. 单击导航链接至/产品详细信息
3. ProductDetailPhotos DOM首先使用淡入淡出类进行渲染
4. 然后Products DOM开始用带有淡出退出类的CSS和带有淡出出现类的ProductDetailPhotos DOM动画退出

谢谢。

Answer 1

我自己解决了。转换此：

<Switch location={location}>

进入这个：

<Switch key={location.pathname} location={this.props.location}>