[문제]
React + Vite로 프로젝트 생성하였고 정상적으로 작동하지만,
/가 아닌 경로에서 새로고침을 하거나, URL을 직접 입력해서 페이지 이동을 하게되면
404 NOT FOUND ERROR가 발생한다.
로컬에서 확인했을 때에는 아무 문제가 없고
vercel에서만 일어나는 현상이다.
[원인]
이유를 구글링 해보니
React는 SPA라서 동적 라우팅을 하는데,
동적 경로에서 새로고침을 하면, vercel은 물리적으로 해당되는 페이지를 찾는데, 그 페이지가 존재하지 않기 때문에 에러가 발생한다.
[해결법]
vercel.json을 생성한다.
{
"routes": [{ "src": "/(new|diary/[^/]+|edit/[^/]+)", "dest": "/" }]
}위의 vercel.json을 추가하고 다시 재배포를 했더니 해당 에러가 사라졌다.
- routes: URL라우팅 규칙을 정의
- src: 일치할 소스 url패턴
- dest: 리디렉션 할 대상 URL
- /new: "/new" 경로와 일치합니다.
- diary/[^/]+: "/diary/" 뒤에 모든 문자가 오는 것과 일치(동적 ID)
- edit/[^/]+: "/edit/" 뒤에 모든 문자가 오는 것과 일치(동적 ID)
따라서 모든 /new, /diary/:id 및 /edit/:id
경로를 루트 경로 / 로 라우팅하여 단일 페이지 React애플리케이션에서 클라이언트 측 라우팅을 처리한다.
