javascript - React Router - 次のページが完全に読み込まれたときに切り替える

Question

react-routerwithを使用しreact-transition-groupて、ページ全体のコンポーネントを切り替えています (単純な本を考えてください)。ただし、次のページにいくつかの画像がある場合があります。したがって、すべての画像/含まれる CSS も読み込まれるまで、次のページを読み込みたくありません。この移行が行われる前にローダーがあり、次のコンポーネントがロードされるのを待っていてもかまいません。

ただし、次のコンポーネントのロード全体でイベントを呼び出す方法が見つかりません。componentDidMount()入ってくるコンポーネントの画像が新しいコンポーネント内に読み込まれたかどうかを認識しないため、次のコンポーネントがスライドインしたときに画像が読み込まれないことが多いため、あまりスムーズではありません。

これが私の CSSTransition と Switch コードです。

const App = withRouter(({ location }) => (
    <TransitionGroup>
        <CSSTransition
            key={location.key}
            classNames='slide'
            timeout={1000}
        >
            <Switch location={location}>
                <Route path="/:page" component={Subpage} />
                <Route path="/" exact component={Homepage} />
            </Switch>
        </CSSTransition>
    </TransitionGroup>
))