ViteとGithub Pagesを使ってデプロイしたら画面真っ白！(React Routerが原因)

はじめに

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が画面遷移を行い、ページを正常に表示することが可能となります。

終わりに

エラーも出ずに、画面が真っ白になって驚いた方のお役に立てれば光栄です。