[netlify] - 새로고침 에러

 

 

 

React앱을 배포하고 난 후, 호스팅된 페이지에서 메인 페이지가 아닌 /contact 등의 하위 페이지에서 새로고침을 하면 404 에러가 뜨는 것을 발견했다.

404에러 발생 문구

 

 

 

Router 설정상 리액트의 첫 페이지 url은 '/' 이다. 이곳에서 index.html을 읽기 때문에, '/' 의 페이지가 index.html로 지정되어 있는 것이나 마찬가지다.

그러나 라우팅된 페이지로 이동했을 경우 각 url에 맞는 별도의 파일이 존재하는것이 아니기 때문에, 404 에러를 띄운다. (리액트는 index.html 하나로만 동작하는 SPA이므로..)

 

따라서 어떤 경로로 접속하든 index.html을 보내주세요~ 라는 코드를 추가해야 한다. 

 

public 폴더에 _redirects 라는 이름의 파일을 생성한다. 확장자는 없다. 그리고 아래 내용을 작성한다.

/* /index.html 200

작성한 모습

 

 

Netlify는 깃에 push를 하면 자동으로 재배포를 해주므로, push하고 조금만 기다리면 된다.