[SPA開発]Router使用時、ページをリロードすると404エラーになる時の対策

ReactでSPAサイトを開発中に以下のような操作を行うと404エラーが発生する。

1. Routerでページルーティング
2. Router経由でページ遷移（ok）
3. ページ遷移後、ページをリロード（エラー）

さらに、下層ページのURLを入力して直接アクセスしても同じエラーとなる。

これを解決する方法について記載します。

解決策

解決策はリクエストを起点となっているhtmlファイルへリダイレクトさせる事です。

webpackを使用して開発環境を使用している場合はwebpack.config.jsのdevServerに以下のコードを記載する事でリダイレクトが可能です。

devServer: {
  historyApiFallback: {
    rewrites: [{ from: /^\/*/, to: '/index.html' }],
  }
},

Apacheを使用している場合は.htaccessにリダイレクト処理を記載します。

原因

原因は単純にパス通りにアクセスされるからです。

例えば、/users/name/ページへアクセスした場合、/users/name/index.htmlへアクセスしようとしますが、そのようなページは制作していません。

ですので404エラーになります。

逆に言えば/users/name/index.htmlを制作すれば404エラーは防げますが多くの場合、SSGなどをしない場合、制作する事はなく、リダイレクト処理で解決します。