React CSSTransition between sub routes

Question

App Component:
<TransitionGroup>
    <CSSTransition classNames="slide">
        <Switch>
            <Route path='/page1' component={Page1} />
            <Route path='/page2/:tab' component={Page2} />
        </Switch>
    </CSSTransition>
</TransitionGroup>


Page2 Component:
<TransitionGroup>
    <CSSTransition classNames="fade">
        <Switch>
            <Route path='/tab1' component={T1} />
            <Route path='/tab2' component={T2} />
        </Switch>
    </CSSTransition>
</TransitionGroup>

I want two type of animations. One between pages and one between tabs within a page. But when I click on page2/tab1 or page2/tab2 animations of pages (slide) apply. When I want to apply animation of tabs (fade). Is there a way to fix it?

Answer 1

You should use SwitchTransition instead of TransitionGroup in your "App Component". Read second paragraph in documentation http://reactcommunity.org/react-transition-group/switch-transition