React accordion-style transitions with react-router-dom

I've set up an accordion style website that works nicely with react-dom-router. It's got a bit of an unusual structure as the Navlink are inside each accordion body [login to view URL] My question is two-fold: Is the current accordion-style setup with react-router the correct way to do things (eg. <Navlinks> are adjacent to <Route>)? How can I easily animate the accordion with CSS with states like enter, enter-active, enter-done etc ? What I have so far: With the intention to animate the accordion when they open and close. I've setup CSSTransition from react-transition-group. Now CSSTransition exposes the corresponding CSS classes such as: .caseTransition-enter { opacity: 0; } .caseTransition-exit { opacity: 1; } And the implementation looks like: <Route exact path={[login to view URL]} children={({ match, ...rest }) => ( <CSSTransition in={match} timeout={1000} classNames="caseTransition" mountOnEnter unmountOnExit> <Layout> <Tag data={data} /> </Layout> </CSSTransition> )} /> But the problem is that I would ideally need these properties to be applied to the parent element. Somehow. [login to view URL] In the screenshot you can see the CSS properties being applied inside each accordion header. But I want the dynamic CSS classes to be applied to the accordion header itself ([data-section]) The reason for that is that I'm planning on animating flex-basis properties to open and close the accordions. Kind of like this pseudocode: .[data-section]enter { flex: 1; } .[data-section]exit { flex: 0; } Is this something easy to implement with CSSTransition? Is this related? [login to view URL]