react-routerアプリで、リロードすると404になる問題
五味 五郎
@ottonove
react-routerを使用したreactアプリを作成してます。
作成中に発生した問題と対策を記します。
原因が分かれば、至極当然の動作でしたが、それが分かるまでは悩みました😓
前提:アプリの構成
サーバ:nginx
バックエンド:djangoRESTFramework
フロントエンド:react, redux, react-router
前提:nginxの設定
location / {
root /path/to/app;
index index.html index.htm;
}
※これ以外のlocationディレクティブは無し。
前提:react-routerについて
アプリ内のページ遷移を、擬似的にURLで行える様にする。
※遷移先ページのhtmlファイルが生成される訳では無い。
問題
トップページ( 'reactapp.com' )から他のページ( 'reactapp.com/other/' )には正常に遷移するが、そのページをリロードすると、404になる。
原因
リロードすると、URL通りのリクエストがサーバ(nginx)に対して送られる。
上記の例だと、'/path/to/app/other/index.html' を返すようリクエストが送られる。
だがサーバにはそのファイルが存在しないため、404となった。
対策
nginxの設定を下記に変更。
location / {
root /path/to/app;
index index.html index.htm;
try_files $uri /index.html; # 追記
}
これにより、'$uri' にマッチするファイルが存在しない場合には、'/index.html' にリダイレクトする様になる。
※ $uri = パラメータなしのリクエストURI
広告欄
WRITTEN BY
五味 五郎
@ottonove
SERIES
この記事に連載はありません。
READ NEXT
COMMENTS
コメント機能は開発中です。実装完了まで今しばらくお待ちください。