問題タブ [code-splitting-async]

反応ルーターv4、webpack 4を備えた標準のReact-Reduxアプリケーションがあり、loadable-componentsライブラリを介してコンポーネントの遅延読み込みを実行しようとしているため、webpackはチャンクを作成してオンデマンドでロードできます。問題は、ルートに関係なく、常にDashboard（以下のコードを参照）コンポーネントをレンダリングしているようです。<Switch>

原因がわかりません。私は同様の問題を見つけました: React-Router v4 render wrong component but matching correctly but it follow a different pattern and I can't、またはその解決策を私の問題に適用する方法を理解していません。

メインの AppContainer とルート ファイルを投稿しています。

AppContainer.js:

ルート/index.js:

そして、興味のある人のために、ここにPrivateRouteコンポーネントがあります：

routes/index.jsのブロックを削除し、if (_DEV_)常に「else」ブロックのように実行すると、すべて正常に動作しますが、HMR が失われます。つまり、コードの変更が有効になるようにブラウザーを更新する必要があります。

編集

history プロップがどこから来たのか迷っている人のために: アプリのメイン エントリ ポイント (webpack.config.js 内)。ソース/main.js:

createStore.js:

react- loadable を使用して、react ルーター v4 でコード分割を試みています。私が達成しようとしているのは、現在のビューを読み込み中のコンポーネントに置き換えるのではなく、現在レンダリングされているものをすべて保持することです。現在ロードされているコンポーネントのみの状態を変更します。反応ロード可能を使用してこれを達成する方法はありますか? または、別のライブラリがある可能性があります。

export default connect(mapStateToProps, mapDispatchToProps)(LoaderStripComponent);

インポートの約束が解決されるまで、この LoadableStrip が以前にロードされたコンポーネントをレンダリングするようにします。

私は vuejs が初めてで、vuejs コード分割機能で nprogress を使用したいと考えています。基本的に、ページへの移動を使用するときに nprogress が必要です。要件は、コンポーネントの約束が解決しないまで進行状況を表示することです。この機能をアプリに追加するにはどうすればよいですか?

これが私のコードです：