約 1 分で読めます

Reactアプリをサブディレクトリでデプロイするときに真っ白な画面になってしまった

結論

package.jsonに追記

package.json
"homepage": "/path"

ファイルのパスを修正

public/配下に以下の.htaccessを追加してビルド

.htaccess
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

ルーティングのパスを修正

ルーティングを行っているファイル内のRouterにbasenameを設定する

main.jsx
<BrowserRouter basename="/path">
</BrowserRouter>

詳細な状態

React-router-domを使ったWEBアプリを開発、npm run buildでデプロイ用のファイルを作ってWEBサーバーにアップロード(www.website.com/などのルートディレクトリではなくwww.website.com/sub/のようなサブディレクトリ)。
何も表示されず真っ白だったので、ローカル環境(xampp)で確認するも真っ白。
Routerの外に試しに<div>Loaded</div>をつけて確認すると表示されたので、react-router-domが原因だと判明。