реакция-переходная группа v2 и реакция-маршрутизатор-dom v4.Почему анимация изменяет данные как во внутреннем, так и во внешнем компонентах?

Question

У меня есть простой тестовый стенд кода, где мы можем увидеть, как react-transition-group .v2 работает ненормально с анимацией при навигации между путями через react-router-dom v4.

Тестовый стенд: https://codesandbox.io/s/oxkw5prm56?from-embed

Как правило, этот код просто выводит string с текстом, по пути которого в данный момент нажата кнопка, и помещает его в тело страницы после.

Но одна странная вещь, которую react-transition-group .v2 дает мне, это тот момент, когда путь изменяется и новый текст помещается до исчезновения предыдущего - предыдущая строка текста заменяет собственнуюконтент с содержанием нового .Итак, как вы понимаете, у нас есть сценарий с двумя похожими текстовыми строками после щелчка по любому пути, это неверно.

Кто-то знает, почему это происходит?Спасибо

Answer 1

Это потому, что вы забыли о том, что представляет собой новый Transition API. В новой версии 4 он использует объект location prop in history (полученный от import { syncHistoryWithStore } from 'react-router-redux'), чтобы предложить, как анимация должна обновлять компонент.

Итак, обычно квитанция в таком случае для вас может быть следующей:

в App добавление компонента location реквизит в Switch разделе:

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>
))