React Router Transition 효과 적용

Router 이동시 마다 모바일과 같이 Transition 효과를 적용할수 있습니다. TransitionGroup, CSSTransition 활용하여 2개 Layout이 움직이는 것처럼 효과를 주는 것이 가능합니다. 적용 순서 TransitionGroup 정의 CSSTransition 정의 CSS 정의 : Route 및 Transition Class router back 감지 TransitionGroup className : TransitionGroup CSS class명을 지정 <TransitionGroup className={`transitions-wrapper-right`}> ... </TransitionGroup> 2. CSSTransition key : 해당 Key로 해당 Route를 찾아서 Transition 효과를 적용함 useLocation을 이용하여 현재 path를 key 로 설정 className : 실제 Transition효과가 발생하는 CSS class명을 지정...

원문링크 : React Router Transition 효과 적용