Reactjs React CSTranslation with Route先渲染下一页，然后再渲染下一页

从呈现的

产品的状态开始

我希望上面的
Products
以动画形式退出，并在单击
NavLink to={'/product detail/'+variant.id}
时显示
ProductDetailPhotos
，该链接存在于
Products
视图中，首先，上面的
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>


}/>
}/>

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

产品DOM
被渲染
单击导航链接到/产品详细信息
Products DOM
立即更改为带有淡入退出类的
ProductDetailPhotos 1 DOM
，然后呈现带有淡入显示类的
ProductDetailPhotos 2 DOM
ProductDetailPhotos 1 DOM
和
ProductDetailPhotos 2 DOM
通过CSS启动动画
ProductDetailPhotos 1 DOM
设置动画以退出，而
ProductDetailPhotos 2 DOM
设置动画以进入
ProductDetailPhotos 1 DOM
最终消失
我的期望如下：

产品DOM
被渲染
单击导航链接到/产品详细信息
ProductDetailPhotos DOM
首先使用淡入淡出类呈现
然后，
Products-DOM
开始设置动画，通过CSS使用淡入退出类退出，
ProductDetailPhotos-DOM
也使用淡入显示类退出
谢谢。
我自己决定。将此转换为：

<Switch location={location}>



为此：

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