[React & Vite] 🚨 Vercel 배포시 404 에러

React + Vite + JS 프로젝트를 작업하고 Vercel에 배포를 하니 간헐적으로 404에러가 발생했다. 이유가 궁금해서 좀 더  테스트를 진행해보니 랜덤하게 발생하는게 아니고 `navigate`나 `<Link>`로 이동하지 않으면 해당 에러가 발생하는 것 같았다. 예를 들어 `/signin` 이라는 path에 접근할 때 버튼 클릭 등으로 이동하는게 아닌, 직접 url에 입력해서 이동하려하면 발생했다.

 

🚨 404 해결

해결은 매우매우 간단하게 해결했다. 프로젝트 루트 경로에 `vercel.json` 이라는 파일을 생성하고 아래 내용을 복붙한다.

 

vercel.json

{
  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}