ReactCSSTransitionGroup이있는 React 라우터 4 베타 2

Question

나는 react-motion에 대해 ReactCSSTransitionGroup을 선호합니다. 아래 코드는 경로 변경시 구성 요소가 페이드 인 (나타납니다)하지만 문제는 - 이탈하는 구성 요소가 페이드 아웃되지 않고 즉시 사라지는 것입니다.

<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

<Switch> 작품에만 그 경로의 현재 위치와 일치하는 제 <Route>를 렌더링하는 방식이다. 즉, 탐색 할 때 기존 <FadeRoute>이 즉시 마운트 해제됩니다. 자식 <CSSTransitionGroup>도 마운트 해제되므로 자식에 대해 이탈 전환을 실행할 기회가 없습니다.

<Switch>을 (를) <CSSTransitionGroup> (으)로 묶어보세요. <Switch>은 전환 될 구성 요소이므로 key이어야합니다. 개체를 전달하여 <Switch>이 떠날 때 현재 location 대신 이전 location을 사용하여 애니메이션을 재생하도록합니다.

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