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が原因だと判明。
