React RouterでCannot GETと出た時の対応と原因

はじめに

URLを直接していると、Cannot GET ...と表示されてしまう。

対処法

webpack.configのdevServerの設定に下記を追加

historyApiFallback: true,

原因

公式ドキュメントを翻訳してみると...

HTML5 History API を使用する場合、404 レスポンスの代わりに index.html ページを提供する必要がある可能性があります。devServer.historyApiFallback を true に設定し、有効にします。

SPAみたいに、論理パスを設定することによってルーティングを実装している場合、実際のパスはないため、404エラーを返すけど、上記の設定によって、index.htmlページを返し、そのページに設定してあるルーティング設定をもとにSPAを実現しているようです！