React-transition-group: Route component rendered twice in CSSTransitiongroup

Created on 30 Sep 2017  路  2Comments  路  Source: reactjs/react-transition-group

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/m4mb9Lg3/4/).
When I wrap an routered component in CSSTransition , and when router has changed , the component which in Route will unmount twice:

<TransitionGroup>
      <CSSTransition key={currentKey}
        timeout={timeout}
    unmountOnExit={true}
    mountOnEnter={true}
    classNames="fade">
        <section className="routes-container-section">
            <Switch>
                {
                    routes.map(
                             (route,i)=><Route {...route} key={"route_"+i}/>
                    )
                }
            </Switch>
        </section>
    </CSSTransition>
</TransitionGroup>

Most helpful comment

For anyone experiencing this, add exit={false} to <CSSTransition>

All 2 comments

For anyone experiencing this, add exit={false} to <CSSTransition>

Add location props to <CSSTransition location={location} /> resolve my problem.

Was this page helpful?
0 / 5 - 0 ratings