🐈
React Routerでリロード時にNot Foundページが表示されたときの対処法（さくらサーバー）
概要
さくらのレンタルサーバを利用してReactのビルドファイルを配置しています。
index以外のページでリロードしたときにNot Foundページになりました。
忘備録として対処法をメモしておきます。
対処法
ルートディレクトリに以下のファイルをアップロードしました。
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]
原因
npm run build後のdistフォルダをレンタルサーバの公開ディレクトリにアップロードしています。
そのため、サーバの公開ディレクトリにはindex.htmlしかありません。その他のjsファイルはassetフォルダに配置されます。
ブラウザ側からindex以外のパス（/login、/logoutなど）でリクエストが送られたとき、サーバは該当のリソースがないためNot Foundを返します。
上記の対処法で、存在しないファイルやディレクトリがリクエストされた場合には、index.htmlのレスポンスを返却するようにルール設定します。
（Vue.jsでは必要がなかったので盲点でした。わかってしまえば「確かに」と思いました。）
参考
Discussion