Javascript 用手风琴布局反应路由器过渡

我正在用React重建我的网站。 我遇到了react路由器和react过渡组的问题。 在react router文档中有一个如何创建动画过渡的指南。但它附加到某个布局：

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

据我所知，这里的关键点是用TransitionGroup、CSTranslation和Swtich来包装所有的身体。我或多或少都知道它是怎么工作的。 过渡组保留上一个管线主体并将其过渡出去。
但正如我已经说过的，这个解决方案附在这个布局上。
在我的网站上，我的布局如下：

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

我的网站参考：

---

你能给我推荐一下这种布局的最佳做法吗？

好的，经过大量的尝试和失败，我找到了一个可行的解决方案。 关键点在于路由器文档=>Route render methods=>children

这是我的密码：

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

家
(
)}
/>
关于
(
)}
/>

好的，经过多次尝试并失败后，我找到了一个有效的解决方案。 关键点在于路由器文档=>Route render methods=>children

这是我的密码：

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

家
(
)}
/>
关于
(
)}
/>