React Router Transition with Accordion layout

Question

I am rebuilding my website with React. I faced a problem with react router and react transition group. On react router documentation there is a guide how to create animated transitions. But it's attached to a certain layout:

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

As I understood, the key point there is to wrap all the bodies with TransitionGroup, CSSTransition and Swtich. I've got how it works more or less. Transition Group keeps previous route body and transition it out.
But as I already stated this solution is attached to this layout.
On my website I have layout like this:

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

My website reference: https://dmws.me/
Could you please suggest me best practice for this layout?

Dmitriy · Accepted Answer · 2019-02-28T10:00:34.057

Ok, after a lot of trials and fails, I've got a working solution. The key point was in Router documentation => Route render methods => children
https://reacttraining.com/react-router/web/api/Route/children-func
Here is my code:

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

React Router Transition with Accordion layout

1 Answers1