Webpackのdev-serverでReact のRoutingを適応する

2020年03月01日 00時03分

webpack.config.js 内の

devServer.historyApiFallback: true

を設定してあげるとうまくいく。

devServer.historyApiFallback ついて

devServer.historyApiFallback について SPA は、サーバー上のパスは 1 ページで完結しているので、読み込ませたい JavaScript のパスを指定すると、

404 エラー(React の場合は Cannot GET /foo )が出力される。

そうなった際に、History で内部的に Routing で指定されたパスをリクエストしたという履歴を残しつつ、index.html を表示することで、指定された Routing へのリクエストがあったとしてコンポーネントを読み込ませる制御をしているようなイメージ。

参考

webpack.devserver

connect-history-api-fallback

MDN-History