React Router が Vercel で動かない(404)場合の対処法
問題
ReactRouterを使ったアプリケーションをデプロイした際、ルートパス以外のページにアクセスしようとすると404エラーが出る
解決策
リポジトリ直下にverce.jsonを作成し、以下の様に書き換える
code:vercel.json
{
"routes": [
{ "src": "/widget", "dest": "/" }, // 例
// ... 任意のパスをルートパスに置き換える
{ "src": "/", "dest": "/" }
]
}
一応調べるとよく出てくる解決策は以下の通り
code:vercel.json
{
"rewrites": "source": "/(.*)", "destination": "/" }
}
上記の設定でもVercelでの404エラーは解決したが、ローカル環境でvercel devをした際、ページが真っ白になって読み込まれない問題に遭遇した。
ページが増えると大変そうではあるが、今回は2ページしかないアプリケーションだったため前者の方法で解決をした。