React routeur 4 beta 2 avec ReactCSSTransitionGroup

Question

Je préfère ReactCSSTransitionGroup pour react-motion. Le code ci-dessous provoque le fondu (apparaître) sur le changement d'itinéraire, MAIS le problème est que le composant sortant ne disparaît pas, il part instantanément.

<Switch> 
    <FadeRoute exact path="/" component={PageLanding}/> 
    <FadeRoute path="/login" component={PageLogin}/> 
    <FadeRoute path="/signup" component={PageSignup}/> 
    <FadeRoute component={Page404}/> 
</Switch> 

function FadeRoute({component:Component, ...rest}) { 
    return (
     <Route {...rest} children={({location,match}) => (
       <ReactCSSTransitionGroup {...{key:Date.now(), transitionName:'fade', transitionAppear:true, transitionEnter:true, transitionLeave:true, transitionAppearTimeout:300, transitionEnterTimeout:300, transitionLeaveTimeout:300})}> 
        <Component/> 
       </ReactCSSTransitionGroup> 
     )} /> 
    ); 
} 

<style> 
.fade-enter, .fade-appear { opacity:0; } 
.fade-enter.fade-enter-active, 
.fade-appear.fade-appear-active { opacity:1; transition: opacity 300ms; } 
.fade-leave { opacity:1; } 
.fade-leave.fade-leave-active { opacity:0; transition: opacity 300ms; } 
</style> 

Answer 1

la façon dont un <Switch> fonctionne est que cela rend seulement la première <Route> dont le trajet est adaptée par l'emplacement actuel. Cela signifie que lorsque vous naviguez, le <FadeRoute> existant est immédiatement démonté lorsque vous naviguez. Son enfant <CSSTransitionGroup> est également démonté, il n'a donc aucune possibilité d'exécuter la transition de congé pour ses enfants. Ce que vous voulez faire est d'envelopper votre <Switch> dans un <CSSTransitionGroup>. Le <Switch> est le composant qui sera transféré, il devrait donc avoir un key. Vous devriez également lui passer l'objet location de sorte que, quand un <Switch> quitte, il s'anime en utilisant l'ancien location au lieu de l'actuel.

<CSSTransitionGroup 
    transitionName='fade' 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={500} 
> 
    <Switch key={location.pathname} location={location}> 
    <Route path="/red" render={Red} /> 
    <Route path="/green" render={Green} /> 
    <Route path="/blue" render={Blue} /> 
    </Switch> 
</CSSTransitionGroup>