reactjs - React - 在嵌套路由中使用 react-transition-group TransitionGroup

Question

我搜索了这个问题，但我找不到原生 react-transition-group 的解决方案。

我有 2 个组件 Home 和 Order。我对这些使用路由转换。这些平坦的路线一切正常。

<TransitionGroup component={null}>
        <CSSTransition
            key={props.locationKey}
            classNames={["route-slide"].join(' ')}
            timeout={{ enter: 1000, exit: 500 }}>
            <div>
            <Switch key={this.props.location.pathname} location={this.props.location}>
                <Route path="/home" component={Home} /> 
                <Route path="/order" component={Order} />
                <Route path="*" render={({ location }) => {
                                if (location.pathname === window.location.pathname) {
                                    return <Redirect to="/home" />;
                                }
                                return null;
                            }} />
.
.
.

我想对 Home 组件中的子路由使用路由转换。但是当我想为子路线设置动画时，总是会为 Home 组件设置动画。您可以在下面找到子路线。

<TransitionGroup component={null}>
            <CSSTransition
                key={props.locationKey}
                classNames={["route-slide"].join(' ')}
                timeout={{ enter: 1000, exit: 500 }}>
                <div>
                <Switch key={this.props.location.pathname} location={this.props.location}>
                    <Route path="/home" exact render={() => {
                                    return <Navigations/>;
                                }} />

                    <Route path="/home/:type" component={SomeComponentByType} />
                </Switch>
.
.
.

这是家庭组件的图像。

如何仅对子路线进行动画处理？

感谢您的帮助