reactjs - React Loadable を使用したコード分割とコンテナーを使用したルーティング

Question

すべてのメインルートのコード分割を実現して、すべてのページに独自のファイル (サブコンポーネントとともに) を持たせたいと考えています。たとえば、Routeコンテナを指すコンポーネントを含むメインのレンダリング関数があります。

    <Route path={`path1`} component={foo.container} />
    <Route path={`path2`} component={bar.container} />

各コンテナは次のようになります。

const mapDispatchToProps = {
... actions etc ...
}

const mapStateToProps = (state) => ({
... selectors etc ...
})

const withConnect = connect(mapStateToProps, mapDispatchToProps);

export default compose(withConnect)(MyComponent);

コンテナーをラップしてルートで参照しようとしましたが、うまくいきませんでした:

export default Loadable({
  loader: () => import('./MyContainer'),
  loading() {
    return (<div>Loading...</div>)
  },
});

では、何をラップすればよいのでしょうか。