React를 사용해 개발한 웹사이트를 netlify에 배포하려고 한다.

*React Router를 사용하는 React 사이트를 netlify에 배포하는 경우 다음과 같은 에러가 발생할 수 있다.*

배포 후 netlify의 page not found 에러

왜 Page Not Found가 발생할까?

React Router는 Client에서 라우팅을 처리한다. 따라서 root가 아닌 다른 페이지에 접속할 때, netlify는 route를 처리하는 방법을 알 수 없다.

해결 방법

netlify는 client측에서 처리되지 않는 URL을 처리할 수 있도록 _redirects 라는 파일을 제공한다.

netlify 문서의 "History Pushstate and Single Page Apps" 섹션을 보면 SPA URL의 root로 redirect하는 방법을 보여준다.

이 문제를 해결하기 위해서는 프로젝트의 public/디렉토리 내에 _redirects 파일을 만들어 주어야 한다. 포함되어야 하는 내용은 다음과 같다.

/* /index.html 200

해당 파일을 추가해주고 나면 페이지 이동 시 발생하던 Page Not Found에러는 감쪽같이 해결된다.