reactjs - React router animations. How to preserve components from unmounting during route transition -

in our current project use effect accordion few content pages. (example: open https://domena.redesignum.cz/search/hello%20github click on domain , in bottom right corner on "pokračovat"). can see. when go on page, there animation shrink first page , second page appear.

in current solution using "without react router" solution react-routes doc.

simplified code

render() {   if(this.props.route == "/search/my-domain") {     <div classname="wrapper">       <contenttransition key="search" width="100%">         <div classname="search">           <div>search content</div>         </div>       </contenttransition>       <contenttransition key="domains" width={0}>         <div classname="domains">           <div>domain content</div>         </div>       </contenttransition>     </div>   } else if(this.props.route == "/domains") {     <div classname="wrapper">       <contenttransition key="search" width={100}>         <div classname="search">           <div>search content</div>         </div>       </contenttransition>       <contenttransition key="domains" width={this.props.windowwidth - 100}>         <div classname="domains">           <div>domain content</div>         </div>       </contenttransition>     </div>   } } 

only change between pages properties contenttransition component. contenttransition component works same way react css transitions, animating engine greensock.

point of components kept in dom , animations can works correctly.

when tried refactor react-router (1.0.0.beta3 same problem 0.13.3) split if/else separate components (pages) , applied them react router.

<route component={app}>   <route path="/search/:name" component={searchpage} />   <route path="/domains" component={domainspage} /> </route>  // searchpage component render() {   <div classname="wrapper">     <contenttransition width="100%">       <div classname="search">         <div>search content</div>       </div>     </contenttransition>     <contenttransition width={0}>       <div classname="domains">         <div>domain content</div>       </div>     </contenttransition>   </div> }  // domainpage component render() {   <div classname="wrapper">     <contenttransition width="100%">       <div classname="search">         <div>search content</div>       </div>     </contenttransition>     <contenttransition width={0}>       <div classname="domains">         <div>domain content</div>       </div>     </contenttransition>   </div> } 

animation there can't work correctly because on every route transitions page component replaced , child components too. break animations.

is there solution or best practicies problem?

i asked similar question here , solved problem making sure components' key not want remounted stayed same during transitions.

if wanting have both child routes active, , assuming search component parent - should nest domains page within search page. way when transition, search component not remount, , content within domains component rendered without animation interrupts.

<route component={app}>   <route path="/search/:name" component={searchpage}>      <route path="/domains" component={domainspage} />   </route> </route>