React Router를 사용해 배포할 때 각 플랫폼 서비스에서 주의할 점을 말씀드립니다. 이 문제는 브라우저(클라이언트) 환경에서 애플리케이션을 루트에 따라 렌더링하는 클라이언트 사이드 렌더링(CSR) 방법을 사용할 때 보이는 문제입니다.
| 플랫폼 | 주의 사항 |
|---|---|
| GitHub Pages | 브라우저 라우터 방식을 지원하지 않아 해시 라우터 방식을 사용해야 합니다. (GitHub Pages 참고) |
| Netlify | 홈이 아닌 다른 루트에서 새로고침 시, Page Not Found 오류 메시지가 출력됩니다. (Netlify 참고) |
| Vercel | 홈이 아닌 다른 루트에서 새로고침 시, 404 Not Found 오류 메시지가 출력됩니다. (Vercel 참고) |
GitHub Pages는 내부적으로 HTML5 History API를 지원하지 않습니다. 그래서 특정 페이지 루트(route)에서 새로 고침할 경우 페이지를 찾을 수 없는 404 오류가 출력됩니다.
GitHub Pages 사이트 만들기 - GitHub Docs
이 문제를 해결하려면 BrowserRouter 대신 HashRouter를 사용해야 합니다. React Router 6.4 이전 버전을 사용한다면 <HashRouter>를 사용합니다. (참고) React Router 6.4 이상 버전을 사용한다면? createHashRouter 함수를 활용합니다. (참고)
GitHub Pages에서 브라우저 라우터 방식을 지원하지 않지만, 리디렉션 트릭(redirects trick)을 사용해 문제를 해결할 수 있습니다. 작동 원리는 호스팅되는 루트 디렉토리 위치에 404.html 파일을 추가하여 현재 URL을 읽어 루트(route)와 쿼리 문자열(query string)을 사용해 브라우저에 새 URL로 리디렉션 요청하는 스크립트를 작성하면 GitHub Pages에 새로운 URL을 요청해 정상적으로 페이지가 라우팅 되도록 하는 것입니다.
해당 방법을 제시한 GitHub 저장소에서 자세한 내용을 확인할 수 있습니다.
GitHub - rafgraph/spa-github-pages: Host single page apps with GitHub Pages
<aside> ☝🏼 위 방법이 복잡해서인지.. 대부분 간편한 해시 라우터를 사용해 GitHub Pages에 배포합니다.
</aside>