React CSS子路由之间的转换

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>

我想要两种类型的动画。一个是页面之间的动画，一个是页面内标签之间的动画。但当我点击page2tab1或page2tab2时，页面的动画（滑动）就会应用。当我想应用标签的动画（淡出）。有什么方法可以解决这个问题吗？

Answer 1

你应该使用 SwitchTransition 而不是 TransitionGroup 在您的 "应用程序组件 "中。阅读文档中的第二段 http:/reactcommunity.orgreact-transition-groupswitch-transition。