react-transition-group v2 and react-router-dom v4. Why animation change the data in both: inner and outer components?

I have a simple test stand of code, where we can see how the react-transition-group .v2 works unnormally with animations in navigation between paths via react-router-dom v4.

Test stand: https://codesandbox.io/s/oxkw5prm56?from-embed

Typically, this code is just output the string with text of which path is currently clicked, and puts it in the page body after.

But one strange thing that react-transition-group .v2 in give me, it’s the moment, when the path is changed and the new text is placed before the previous one is disappear – the previous string of text replace own content with the content of the new one. So, as you understand we have scenario with two similar text strings after click of any path, that is incorrect.

Does someone know why it’s happen? Thanks

Answer

This is because you forgot about what is the new Transition API is. In new v4 it has uses the location prop in history object (received from import { syncHistoryWithStore } from 'react-router-redux') to suggest how the animation should update component.

So, typically the receipt in such case for you can be the next:

in App component add location prop in Switch section:

const App = withRouter(({ location }) => (
  <div>
    ....
    <TransitionGroup>
      <CSSTransition
        key={location.key}
        classNames='fade'
        timeout={1000}
      >
        <Switch location={location}> // this string is updated!
          <Route exact path='/' component={Home} />
          <Route exact path='/other' component={Other} />
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  </div>
)) 
Source: stackoverflow
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .