はじめに
GitHub Pagesを使って作成したWebサイトをデプロイしてみたところ、画面が真っ白になりました！
デベロッパーツールを見ても、エラーは特に出ていないのに、画面が真っ白 という方がいれば、この記事が役立つかもしれません。
結論
私の場合はReact Routerが原因でした。
具体的にはGithub Pagesでデプロイすると、そのURLは
https://ユーザ名.github.io/リポジトリ名/
というようになり、URLのベースをリポジトリ名に合わせる必要があります。
この対策を行わなければ、React Routerが
https://ユーザ名.github.io/
にアクセスしてしまっている？と思います。
それが原因で、ページが表示されず、真っ白になります。
解決策
それでは解決策に入りましょう。
環境変数やvite.configをいじったり、何個か解決策は存在しますが
私が最も簡単だと感じた方法を紹介します。
以下がその方法です！
ReactDOM.createRoot(document.getElementById("root")!).render(
<BrowserRouter basename={import.meta.env.DEV ? "/" : "/レポジトリ名/"}>
<App />
</BrowserRouter>
);
主な変更点は、BrowserRouter に以下の部分を追加した点です。
basename={import.meta.env.DEV ? "/" : "/レポジトリ名/"}
こちらを軽く解説すると、
まず、import.meta.env.DEV によって開発環境か否かを認識します。
そして、その結果が True であれば "/"
False であれば "/レポジトリ名/" を
basename に代入しています。
これによって、
デプロイ後の本番環境には、レポジトリ名をベースとしてReact Routerが画面遷移を行い、ページを正常に表示することが可能となります。
終わりに
エラーも出ずに、画面が真っ白になって驚いた方のお役に立てれば光栄です。