🌴 리액트 앱 새로고침 시 404 오류 발생

위듀를 배포하였는데, 루트 페이지는 정상적으로 접근이 되지만, 그 외 페이지는 루트에서 이동할 때만 정상적으로 접근이 되고 해당 페이지에서 새로고침하면 404 오류가 발생하였다.

그 이유는 react-router-dom으로 라우팅한 페이지이기 때문에 csr 특성상 리액트 루트 페이지에서 이동은 가능하지만 해당 페이지에서 새로고침하면 백엔드에서 해당 주소로 html 파일을 요청하기 때문에, csr은 루트페이지만 html 파일이 존재하므로 그 외 페이지는 404에러가 발생하게 되는 것이다.

이를 해결하기 위한 방법중에 HashRouter에 대해서 알아보자.

🌴 Hash Router

• URL의 hash를 활용한 라우터입니다.
• CSR에 적합합니다.
• 라우터에 #가 붙습니다.
• 해시를 사용하면 서버에 요청하지 않기 때문에 새로고침하거나 url로 직접 접근해도 에러가 발생하지 않습니다.
• 따라서 배포가 좀 더 간단합니다.
• 하지만 # 때문에 검색 엔진이 읽지 못하여 SEO가 좋지 않습니다.

페이지를 새로고침하게 되면, 브라우저가 현재 경로를 사용하여 서버에 GET 요청을 보내게 됩니다.

#은 GET 요청을 보내지 못하도록하는 데 사용되었습니다.

이로 인해 두 라우터 사이에는 큰 차이가 있습니다.

따로 서버가 존재하고, SEO 최적화가 필요한 대규모 프로젝트에는 BrowserRouter를,