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

Question

In our current project we use effect like accordion for few content pages. (example: open https://domena.redesignum.cz/search/hello%20github click on any domain and then in bottom right corner on "pokračovat"). As you can see. When you go on another page, there is animation which shrink first page and second page appear.

In my current solution I am using your "Without React Router" solution from 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 are properties for ContentTransition component. ContentTransition is my component which works same way as react Css Transitions, but animating engine is Greensock.

Point of this is that components are kept in dom and animations can works correctly.

When I tried to refactor into react-router (1.0.0.beta3 but same problem with 0.13.3) i split this if/else into separate components (pages) and applied them to 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 the page component is replaced with another and child components too. This break animations.

Is there any solution or best practicies for this problem?

Have you found any kind of solution to this? I am trying to do something very similar. — Julien Vincent, Aug 04 '15 at 15:32

score -3 · Answer 1 · edited May 23 '17 at 11:53

I asked a similar question here and what solved my problem was making sure the components' key you do not want remounted stayed the same during transitions.

If you are wanting to have both child routes active, and assuming your search component is the parent - you should nest the domains page within the search page. That way when you transition, the search component will not remount, and the content within the domains component will be rendered without animation interrupts.

<Route component={App}>
  <Route path="/search/:name" component={SearchPage}>
     <Route path="/domains" component={DomainsPage} />
  </Route>
</Route>

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

1 Answers1