gh-pages 배포 시, 빈 화면만 나오는 문제 해결하기..

문제발생

react-router-dom을 사용한 리액트 프로젝트가 gh-pages 배포 후, 사진과 같이 텅 빈 화면만 나온다면?

콘솔창을 보면 이런 에러가 있을 것이다.
Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'

문제수정

react-router-dom이 컴포넌트로 감싸고 있는 App.js에서 path를 수정만 하면 간단하게 해결 가능하다.

• Before
  

• After
  

모든 react-router-dom을 사용하는 path 부분에 process.env.PUBLIC_URL 를 추가하자!!

• <Link> 에도 추가 해야한다!!
  

참고로, PUBLIC_URL은 package.json의 homepage URL값으로 설정된다.

문제해결

• 또는...
  <Router> 에 basename={process.env.PUBLIC_URL} 을 주면 더 편할 것 같다.