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

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする