Firebase Hosting + React Router でURL変化後にF5しても画面表示できない場合の対応

React RouterによるURL制御後、F5を押すとなぜか白くなる

ログを見ると、全リクエスト（js,cssまでも）のレスポンスがindex.htmlの内容に・・・。

firebase.jsonの内容

firebase.jsonのhosting > rewritesの内容は、以下の通り。
なお、rewritesの内容は、存在しないファイルやパスへのアクセス時に参照される。

   "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],

つまり・・・

どうやら、画面遷移後の再表示時のJSファイルのアクセスなどが、firebase.jsonのrewritesの動作対象になったようだ。

原因

1. URLが変化
2. rewritesにより、ページのコンテンツは/index.html
3. しかし、index.htmlから参照していたJSファイルへのパスは相対パス。
4. これにより、そのページからJSファイルを相対アクセスし、404が発生
5. そのJSファイルアクセスに対して、rewritesが動作。
6. JSファイルのリクエストに対するレスポンスもindex.htmlへ・・・

対応

対応前package.json

"homepage": ".",

対応後package.json

"homepage": "/",

firebase.json

特に変更なし。