reactjs - React - ネストされたルートで react-transition-group TransitionGroup を使用する

Question

この問題を検索しましたが、ネイティブの react-transition-group で解決策が見つかりませんでした。

Home と Order の 2 つのコンポーネントがあります。これらにはルート遷移を使用します。これらの平坦なルートでは、すべてがうまく機能します。

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

これは、ホーム コンポーネントのイメージです。

サブルートだけをアニメーション化するにはどうすればよいですか?

助けてくれてありがとう