routing animation을 해보자

react-router-dom의

Route는 unmount되는 즉시 dom에서 컴포넌트를 즉시 삭제한다

그래서 새로운 페이지의 등장 애니매이션은 쉽지만

기존의 페이지는 즉시 사라지기 때문에 애니매이션 효과가 반감된다.

React는 공식적으로 react-transition-group을 이용해서 해결하라고 한다.

<Route render={({location}) => (

<TransitionGroup>

  <CSSTransition key={location.key} classNames="page" timeout={300}>

    <Switch>

      <Route/>

      <Route/>

    </Switch>

  </CSSTransition>

</TransitionGroup>

)} />

와 같이 route이동에서 애니매이션을 쓸 수 있다.

주의할 점은 hashrouter를 쓸 경우 location.key가 없기 때문에 location.pathname 같은 걸로 대체해야 한다.

또한 location.pathname을 쓸 경우 다음과 같은 문제가 있다.

https://github.com/reactjs/react-transition-group/issues/136

참조

https://reacttraining.com/react-router/web/example/animated-transitions