React CSSTransition with Route renders next page first then works with rendering next page again

Question

Starting from the state of that Products is rendered.

I want Products above to exit with animation and ProductDetailPhotos to appear when clicking NavLink to={'/product-detail/' + variant.id} which exists in Products view , however, firstly Products above is replaced by new ProductDetailPhotos and new another ProductDetailPhotos appear after it.

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

I explain actual by time series as below:

1. Products DOM is rendered
2. Click NavLink to /product-detail
3. Products DOM changes to ProductDetailPhotos 1 DOM with fade-exit classes immediately then ProductDetailPhotos 2 DOM with fade-appear classes is rendered
4. ProductDetailPhotos 1 DOM and ProductDetailPhotos 2 DOM start animation by CSS. ProductDetailPhotos 1 DOM animates to exit and ProductDetailPhotos 2 DOM does to enter.
5. ProductDetailPhotos 1 DOM finally disappear

My Expectation is below:

1. Products DOM is rendered
2. Click NavLink to /product-detail
3. ProductDetailPhotos DOM is rendered first with fade-appear classes
4. Then Products DOM starts animating to exit by CSS with fade-exit classes and ProductDetailPhotos DOM too with fade-appear classes.

Thanks.

Answer 1

I resolved by myself. Transform this:

<Switch location={location}>

into this:

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