CODEWITHSUNDEEP
reactjscss-transitionsreact-router-v4reactcsstransitiongroupreact-transition-group
Jagie
Jagie

Reputation: 83

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

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.

Upvotes: 0

Views: 187

Answers (1)

Jagie
Jagie

Reputation: 83

I resolved by myself. Transform this:

<Switch location={location}>

into this:

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

Upvotes: 1

Related Questions