使用 Accordion 布局反应路由器转换答案

【问题标题】：React Router Transition with Accordion layout使用 Accordion 布局反应路由器转换
【发布时间】：2019-07-21 02:35:37
【问题描述】：

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

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

据我了解，关键是用TransitionGroup、CSSTransition 和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)

我的网站参考：https://dmws.me/
你能建议我这个布局的最佳做法吗？

【问题讨论】：

标签： javascript reactjs react-router react-transition-group

【解决方案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>

【讨论】：