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

WRITER
五味 五郎
@ottonove
SERIES
この記事に連載はありません。
READ NEXT
COMMENTS
コメント機能は開発中です。実装完了まで今しばらくお待ちください。