React Github pages 404 File not found on refresh

개요

react 애플리케이션을 github pages에 배포하려고 하는데, 

라우팅 된 페이지에서 새로고침하거나 뒤로가기 하면 이런 에러가 떴다.

 

원인

Github pages는 정적 파일 호스팅 서비스로, 요청한 URL에 대한 파일이 없으면 404가 뜬다.

React는 SPA(Single Page Application)로 클라이언트 사이드 라우팅을 한다. 라우팅을 React가 직접 처리하는데, 이 상황에서는 `index.html`에 다 연결이 되어있어야 하는데 그러지 못해서 생긴 문제다.

 

해결 방법

1️⃣ `404.html`을 `/public` 아래에 작성해서 모든 요청을 `index.html`로 리다이렉트 해준다.

spa-github-pages/404.html at gh-pages · rafgraph/spa-github-pages

 

2️⃣ `package.json`에 homepage 추가

  "homepage": "https://soongsil-security-playground.github.io",

 

3️⃣ `_redirects`를 `/public` 아래에 작성한다.

/* /index.html 200

 

4️⃣ BrowserRouter 대신 HashRouter를 쓴다.

import { HashRouter as Router, Routes, Route } from 'react-router-dom';

• 다만 이대로 하면 url에 `/#/`가 생겨서 싫을 수도 있다...