Использование анимаций с React Router¶
Люди часто хотят анимировать переходы маршрутов, что может привести к восхитительному UX при умеренном использовании. Первым инстинктом может быть использование обертывания всех маршрутов в TransitionGroup, но такой подход требует хаков и легко разваливается при использовании с более хитрыми компонентами React Router, такими как Redirect. Вы должны использовать CSSTransition для каждого маршрута и управлять их in prop самостоятельно.
Основной проблемой является переход exit, поскольку React Router переходит на новый маршрут мгновенно, поэтому нам нужно сохранить старый маршрут достаточно долго для перехода из него. К счастью, пропс Route children также принимает функцию, которую не следует путать с пропсом render! В отличие от свойства render, функция children выполняется независимо от того, найден ли маршрут или нет. React Router передает объект, содержащий объект match, который существует, если маршрут совпадает, иначе он null. Это позволяет нам управлять in prop CSSTransition на основе наличия match.
При выходе из перехода содержимое маршрутов будет оставаться до их исчезновения, что может создать некоторые проблемы с оформлением. Убедитесь, что маршруты не влияют на расположение друг друга, например, вы можете удалить их из потока документа, используя абсолютное или фиксированное позиционирование.
При использовании React Transition Group с React Router убедитесь, что вы не используете компонент Switch, поскольку он выполняет только первый подходящий Route. Это сделает переход выхода невозможным, так как выходящий маршрут больше не будет соответствовать текущему URL и функция children не будет выполнена.