[React] gh-pages로 배포한 페이지가 새로고침 시 404 에러가 떠요!

0. 사건의 발단

평화로운 어느날...

내가 만든 프로젝트를 Github에 배포를 해서 테스트를 진행했는데, 지난번 경로를 인식 못하는 문제 외

페이지에서 새로고침 시 404 에러가 나왔다....

 

1. 문제 이유 

github pages는 SPA를 지원하지 않기 때문에, URL이 https://도메인 으로 지정되어있다. 

그래서 https://도메인/프로젝트명/라우터명 에서 새로고침을 할 경우 Github는 /프로젝트명/라우터명을 모르기 때문에

404 에러와 함께 404.html 페이지를 리턴한다. 

 

2. 해결 방법 

편법이지만, 404.html을 사용한다. 

 

빌드를 하고 결과물의 index.html 파일을 404.html 파일로 복사해서 같이 빌드해주면 된다. 

  "scripts": {
    ...
    
    "deploy": "cp build/index.html build/404.html && gh-pages -d build",
    "predeploy": "npm run build"
  },