reactjs - Based on the routing transition and animate only certain components -

i have react web application tabs navigation , each tab has separate route. route can access tab , vice versa clicking on tab gets me route.

the problem make routing tabs transition , animate components , not whole view - ones change depending on route.

it's possible to, depending on route, animate components?

you're routes should have common parent, animate transition using react css transition group:

<route path="/" component={app}> // parent     <indexroute component={homepage}/>     <route path="page1" component={page1}/>     <route path="page1" component={page2}/>     <route path="page1" component={page3}/>     <route path="page1" component={page4}/> </route> 

in routes container decide if path should animate, , turn on/off transitionenter , transitionleave:

const app = ({ children, location }) => {   const pathstoanimate = ['/page1', '/page3']; // list of routes should animate   const shouldanimate = pathstoanimate.includes(location.pathname); // check if current route among pathstoanimate   return (     <div>       <reactcsstransitiongroup         component="div"         transitionname="example"         transitionenter={ shouldanimate } // animate if shouldanimate true         transitionleave={ shouldanimate } // animate if shouldanimate true         transitionentertimeout={500}         transitionleavetimeout={500}       >         {react.cloneelement(children, {           key: location.pathname         })}       </reactcsstransitiongroup>      </div>   ); };