React CSSTransition с Route рендерит следующую страницу сначала, затем снова работает с рендерингом следующей страницы

Question

Начиная с состояния, в котором отображается Products.

Я хочу, чтобы Products и выше выходили с анимацией, а ProductDetailPhotos появлялось при нажатии NavLink to={'/product-detail/' + variant.id}, который существует в представлении 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>

Я объясняю фактические временные ряды, как показано ниже:

1. Products DOM отображается
2. Нажмите NavLink для / 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. Нажмите NavLink для / product-detail
3. ProductDetailPhotos DOM сначала отображается с исчезающими классами
4. Затем Products DOM начинает анимацию для выхода из CSS склассы исчезновения и ProductDetailPhotos DOM тоже с классами исчезновения.

Спасибо.

Answer 1

Я решил сам. Преобразуйте это:

<Switch location={location}>

в это:

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