React앱을 배포하고 난 후, 호스팅된 페이지에서 메인 페이지가 아닌 /contact 등의 하위 페이지에서 새로고침을 하면 404 에러가 뜨는 것을 발견했다.
Router 설정상 리액트의 첫 페이지 url은 '/' 이다. 이곳에서 index.html을 읽기 때문에, '/' 의 페이지가 index.html로 지정되어 있는 것이나 마찬가지다.
그러나 라우팅된 페이지로 이동했을 경우 각 url에 맞는 별도의 파일이 존재하는것이 아니기 때문에, 404 에러를 띄운다. (리액트는 index.html 하나로만 동작하는 SPA이므로..)
따라서 어떤 경로로 접속하든 index.html을 보내주세요~ 라는 코드를 추가해야 한다.
public 폴더에 _redirects 라는 이름의 파일을 생성한다. 확장자는 없다. 그리고 아래 내용을 작성한다.
/* /index.html 200
Netlify는 깃에 push를 하면 자동으로 재배포를 해주므로, push하고 조금만 기다리면 된다.
'바보일기' 카테고리의 다른 글
Failed to serialize user into session (0) | 2023.01.23 |
---|---|
배포 중 axios 의 CORS 오류 (0) | 2023.01.21 |
[React] Cannot read properties of undefined / useState의 값이 불러오기 전에 렌더링됨 (0) | 2023.01.10 |
The bucket does not allow ACLs (0) | 2023.01.02 |
TypeError: this.client.send is not a function (0) | 2023.01.02 |
댓글