react.jsで作成したSPAの404エラー対応

react.jsで作成したSPAの404エラー対応
         

この記事は1年以上前に更新されたものです。内容が古い可能性がありますのでご注意ください。

現象

reactとreact-routerを使用したSPAで、URLの直接入力
または、ルート以外でリロードした際に404エラーになる。

webサーバはnginx(1.10)

SPAなので当たり前なんですが、気づかず。
(webサーバ設定は、index.htmlの読み込みが第一優先とする)

  1. example.com/ にアクセス ⇛ webroot/index.htmlの読み込み
  2. example.com/hoge に遷移
  3. リロードする ⇛ example.com/hoge ⇛ webroot/hoge/index.htmlの読み込み404エラー

対応

nginxでroot以外のURLアクセスだった場合、一度index.htmlを見に行くようにする。

location / {                                                              
    # いろいろ設定
    try_files $uri /index.html;
}

設定変更後はnginxの再起動を忘れずに。

これで存在しない場合は、index.htmlから追いかけてくれるはず。