React — анимация смены роута. Как задавать разные анимации исходя из URL?

Question

[bormor]

Разобрался как добавить анимацию на появление и исчезновение компонента для роута.
А как можно добавить анимацию исходя из URL? (точнее уровня вложенности)
Как гуглить решения такой задачи?

Цель - сделать анимацию смены роута как в слайдере.
Например:
При переходе c /user1/ на /user1/tasks/ - "слайд справа на лево"
При переходе c /user1/tasks/ на /user/ - "слайд слева на право"

Сниппет текущего кода

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch, withRouter } from 'react-router-dom';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

import './index.css'


const App = withRouter(({ location }) => (
  
    <div>

      <Link to="/">Home</Link> <br/>
      <Link to="/user1">User1</Link> <br/>
      <Link to="/user2/commit2">User2/commit2</Link>

      <hr />

      <TransitionGroup>
        <CSSTransition
          key={location.key}
          classNames='slide'
          timeout={1000}
        >
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route exact path="/:user" component={UserPage} />
            <Route path="/:user/:commit" component={CommitPage} />
          </Switch>
        </CSSTransition>
      </TransitionGroup>

    </div>
  
));

Answer 1

[Евгений]

Прежде всего, необходимо понимать, как у тебя меняется роут (стало больше сегментов или меньше).

Чтобы это можно было вычислить, нужно сравнивать предыдущий роут с текущим при апдейтах компонента.

Вариант #1: изменить SFC на класс и воспользоваться componentWillReceiveProps. Соответственно там трекаешь, как изменился роут и пишешь в setState.

Вариант #2: мемоизация каким-нибудь HOC'ом, например так

const withPrevProps = (Component) => {
    let prevProps = null;
    return (props) => {
        const component = (
            <Component
                {...props}
                prevProps={prevProps}
            />
        );
        prevProps = props;
        return component;
    };
};

const App = withRouter(withPrevProps(({ location, prevProps }) => (
  ...
)));

В обоих случаях, в рендере выставляешь классы в соответствии с тем как у тебя изменился роут.

<CSSTransition
    classNames={'slide-' + slideDirection}
 ...

Живой пример не делал, но кажется это должно подойти

Comments

[bormor]

Спасибо за совет. Попробовал реализовать через HOC:
появляющийся компонент нового роута - меняет направление анимации
исчезающий компонент старого роута - использует направление заданное до того

Живой пример
Можно ли это как-то изменить?