reactjs - React CSSTransition with Route 首先渲染下一页然后再次渲染下一页

Question

从Products呈现的状态开始。

我想Products在上面以动画退出并ProductDetailPhotos在单击viewNavLink to={'/product-detail/' + variant.id}中存在的时候出现Products，但是，首先Products上面被替换为 newProductDetailPhotos和新的另一个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. 单击导航链接到 /product-detail
3. Products DOM立即更改为ProductDetailPhotos 1 DOM淡出退出类，然后ProductDetailPhotos 2 DOM呈现淡出出现类
4. ProductDetailPhotos 1 DOM并ProductDetailPhotos 2 DOM通过 CSS 启动动画。ProductDetailPhotos 1 DOM动画退出并ProductDetailPhotos 2 DOM进入。
5. ProductDetailPhotos 1 DOM终于消失了

我的期望如下：

1. Products DOM被渲染
2. 单击导航链接到 /product-detail
3. ProductDetailPhotos DOM首先使用淡入淡出类呈现
4. 然后Products DOM开始动画退出 CSS 与淡出退出类和ProductDetailPhotos DOM淡出出现类。

谢谢。

Answer 1

我自己解决了。转换这个：

<Switch location={location}>

进入这个：

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