React Router Transition с макетом Аккордеон

Question

Я перестраиваю свой сайт с помощью React. Я столкнулся с проблемой с реагировать маршрутизатор и реагировать переходной группы. В документации по реагирующему маршрутизатору есть руководство по созданию анимированных переходов. Но он привязан к определенной раскладке:

nav
  - link a
  - link b
  - link c
container
  - body a
  - body b
  - body c

Как я понял, ключевой момент заключается в том, чтобы обернуть все тела с помощью TransitionGroup, CSSTransition и Swtich. Я понял, как это работает более или менее. Transition Group сохраняет предыдущее тело маршрута и передает его.
Но, как я уже говорил, это решение привязано к этому макету.
На моем сайте у меня есть такой макет:

   - link a
   - body a (slides down on link click)
   - link b
   - body b (slides down on link click)
   - link c
   - body c (slides down on link click)

Ссылка на мой сайт: https://dmws.me/
Не могли бы вы предложить мне лучшие практики для этого макета?

Answer 1

Хорошо, после многих испытаний и неудач у меня есть рабочее решение. Ключевой момент был в документации по Маршрутизатору => Методы визуализации маршрута => Дети
https://reacttraining.com/react-router/web/api/Route/children-func
Вот мой код:

<div>
  <Link to="/">Home</Link>
  <Route
    exact
    path="/"
    children={({ match, ...rest }) => (
      <CSSTransition
        in={match}
        timeout={500}
        classNames="foo"
        mountOnEnter
        unmountOnExit
      >
        <Home />
      </CSSTransition>
    )}
  />

  <Link to="/about">About</Link>
  <Route
    path="/about"
    children={({ match, ...rest }) => (
      <CSSTransition
        in={match}
        timeout={500}
        classNames="foo"
        mountOnEnter
        unmountOnExit
      >
        <About />
      </CSSTransition>
    )}
  />
</div>