[BUG] gh-pages Failed to load resource, 라우팅 에러

[sojinjang]

🤷 Describe the bug

워크플로우 작성 후 github action 통해 자동 빌드된 GitHub pages 접속 시 Failed to load resource 오류 + 라우팅 에러(404 page로 이동) 발생

📸 Screenshots

[sojinjang]

🐛

1. package.json에 homepage variable 추가 -> Failed to load resource 오류 해결 but 404 page가 렌더링됨
2. BrowerRouter를 HashRouter 변경 -> 404 에러 해결

GitHub pages에서 pushState history API(페이지를 reload하지 않고 주소만 변경할 때 사용하는 방식)를 지원하지 않는다고 한다. 해결을 위해 Hash Router(현재 페이지의 경로 뒤에 #을 붙여 # 뒤의 내용에는 리렌더링이 이루어지지 않도록 하는 방식)로 변경했다. 별도의 서버 설정 없이 Browser Router 활용 시 reload 했을 때 경로를 찾지 못하는 문제도 방지 가능

• Browser Router: 새로고침 시 url 바탕으로 페이지 새로 불러옴. Brouser Router는 Link tag 사용해 url을 이동하며 페이지 불러오는 것이 아닌 주소를 바꿔서 보여주며 컴포넌트들 렌더링. -> 새로고침하면 해당 페이지를 찾지 못함

• Hash Router: 새로고침 시 # 이전의 url만 서버를 통해 불러와서 별도의 서버 설정 없이도 새로고침 시 오류가 발생하지 않음. + # 때문에 검색 엔진이 읽지 못함.

  create react app documentation

  GitHub Pages doesn’t support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42, where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:

  You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Read more about different history implementations in React Router.

🔗 참고링크 1 🔗 참고링크 2 🔗 HashRouter vs BrowserRouter