[React] gh-pages로 배포한 페이지가 router를 제대로 인식 못해요!

0. 사건의 발단

평화로운 어느 날...

나는 내가 만든 프로젝트를 Github에 배포하기 위해서 작업을 진행했다.

분명 로컬에서는 문제없던 프로젝트인데 배포분에서는 원하던 페이지가 나오는 것이 아닌 메인 페이지가 나왔다...

 

1. 문제 이유 

Github는 도메인/페이지 방식이 아닌 도메인/프로젝트명/페이지 방식이어서 라우터를 이동했을 경우 도메인/페이지로 이동되어서 이상한 페이지로 이동된 것이다. 

ex) 

https://seojaewan.github.io/react-sns-login/

React Project!

=  구글 페이지 이동 => 

https://seojaewan.github.io/Google?type=Setting/

 

seojaewan.github.io 뒤에 있던 react-sns-login이 사라져 버렸다. 

 

2. 해결방법

1. HashRouter 사용 

가장 빠른 방법으론 BrowserRouter 말고 HashRouter를 사용한다. 

그럴 경우 주소에 #이 붙는다는 단점이 있다. 

 

2. BrowserRouter에 basename 추가하기 

<BrowserRouter basename={process.env.PUBLIC_URL}>
  <Router />
</BrowserRouter>

BrowserRouter에 basename props를 추가하면 프로젝트의 기본 URL을 설정해줄 수 있다. 

 

라우터로 이동할 경우 "/"를 기준으로 이동하는 것이 아닌 "/react-sns-login/"을 기준으로 이동하는 것이다.