[netlify] Page Not Found Error (React Router)

React.js를 사용해 개발한 웹사이트가 localhost의 npm 또는 yarn에서 정상적으로 작동한다. 따라서 이 사이트를 netlify에 배포하려는 상황이다.

 

이런! 에러가 발생했다!

Page Not Found
Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.

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

배포 후 netlify의 page not found 에러

 

왜 Page Not Found가 발생할까?

React Router는 client에서 라우팅을 처리한다. 따라서 root가 아닌 페이지(ex: https://yoursite.netlify.com/login 등)에 접속할 때, netlify(server)는 route를 처리하는 방법을 알 수 없다.

 

 

해결 방법

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

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

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

/* /index.html 200

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

 

 

 

Ref

- https://dev.to/rajeshroyal/page-not-found-error-on-netlify-reactjs-react-router-solved-43oa