ルートディレクトリではなくサブディレクトリにLaravelとReactで作成したアプリをアップした際に真っ白になってしまって詰まったので備忘録を残したいと思います。
環境
- Laravel9
- React17
- React Router DOM v6
- Vite
詰まった個所
https://example.comのようなルートディレクトリではなくhttps://example.com/testのようなサブディレクトリにLaravelとReactで作成したアプリをビルドしてアップしたら真っ白になって表示されなくなりました。
ディベロッパーツールを確認してみますとまずViteでビルドしたcssとjsが読み込めていないことがわかりました。
この点に関してはLaravelのドキュメントにも書かれていますがベースURLのカスタマイズで解決します。
ASSET_URL=https://example.com/test念のため、package.jsonの編集も行います。
{
"private": true,
"homepage": "./", //追記
.
.
}しかし、それでも解決せず…
解決策
今回React Router DOMを使ってルーティングを設定していたのですが、それがうまく読み込まれていなかったのが原因でした。
これはreact-router-domのBrowserRouterにbasenameを付与することで解決します。
ここを追記するとbasenameで設定したurlをベースとして画面が表示するようになりました。
また今回はこのbasenameを環境変数から呼び出すようにしました。
Laravel×Viteでは環境変数はVITE_ というプレフィックスを付与したうえで、import.meta.envオブジェクトを介して呼び出すことができます。
https://readouble.com/laravel/9.x/ja/vite.html
https://ja.vitejs.dev/guide/env-and-mode.html
VITE_BASENAME=/test/<BrowserRouter basename={import.meta.env.VITE_BASENAME}> // 追記
<Routes>
<Route exact path="/" element={<Top />} />
<Route exact path="/about" element={<About />} />
.
.
</Routes>
</BrowserRouter>関連記事
