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

Question

从呈现Products 的状态开始。

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

<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}>