문제
프로젝트를 배포한 이후부터 새로고침 혹은 뒤로가기 시 404 에러가 발생했습니다. 아무래도 배포 관련 설정 단계에서 문제가 있었던 것 같습니다.
원인
검색을 통해 GitHub Pages는 history API 기능을 제공하지 않아 라우팅 요청없이 URL변경만 이루어지지 않는다는 것을 알게 되었습니다.
해결방법
1. BrowserRouter 대신 HashRouter 사용
http://{깃허브아이디}.github.io/{프로젝트명}/#/api/board HashRouter 사용 시 위 URL과 같이 주소에 #이 붙는 것이 특징입니다. 이 hash로 루트 디렉토리와 서브 디렉토리를 구분합니다.
여기서 중요한 점은 hash 뒤에 작성된 URL이 변경되면 history 객체를 이용해 라우팅을 처리한다는 것입니다. 즉, 리렌더링이 발생하지 않아 서버에 요청하지 않고, 404 에러도 반환하지 않습니다.
그러므로 서버가 페이지의 유무를 알지 못해 정적 페이지에 적합하며, 사용범위가 그만큼 줄어들게 됩니다.
저또한 서버에서 데이터를 가공하여 가져와야 했기 때문에 위 방식으로 해결하지 못했습니다.
2. basename
basename으로 프로젝트의 기본 URL을 설정합니다. 이는 라우터가 현재 프로젝트의 실경로를 따라갈 수 있도록 합니다.
우선 package.json에 다음 설정을 추가합니다.
"homepage": "https://{깃허브아이디}.github.io/{프로젝트명}/",그리고 basename으로 해당 homepage값을 줍니다. (PUBLIC_URL: package.json 의 homepage URL 값)
결과는..!
페이지 이동 시 변경되는 모든 url에 basename이 적용된 것을 볼 수 있습니다. 또한 새로고침 시에도 반영이 되어 더이상 404에러가 발생하지 않습니다. 😄
