ReactでURLを直打ちすると404になってしまう時の解決方法

前提条件

・React-routerを使ってページ遷移を行っていること
・ReactアプリケーションをVercelにデプロイしていること

不具合再現方法

・デプロイしたアプリケーションのURLに特定の画面のURLを直打ちする
例:　https://hogehoge/test　→検索バーに直で入力する

発生原因

以下の記事を参考
https://qiita.com/yakipudding/items/78e68ef31e55f559c0dc

Reactアプリケーションはシングルページアプリケーション（SPA）であり、クライアントサイドでルーティングを管理します。したがって、特定のURLにアクセスすると、サーバーはそのURLに対応するファイルを探しますが、実際にはそのようなファイルは存在しないため、404エラーが発生します。

解決方法

・基本的にはサーバー側での対処が必要になる。今回の場合Vercelでデプロイしているため、
vercel.jsonを作成し、ルーティングを設定する。

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}