gh-pages로 react app 배포 시, 경로를 참조하지 않을 때

 

문제

gh-pages로 react app 을 배포하려고 했다.

npm run deploy 를 실행 했는데 경로를 참조하지 못해서 화면이 이상하다.

 

 

---

 

 

해결

그럴 때는 BrowerRouter에  basename={process.env.PUBLIC_URL} 를 App.js에  추가하면 된다.

App.js

// 예시
import { BrowserRouter } from "react-router-dom";
 
<BrowserRouter basename={process.env.PUBLIC_URL}>
    ...
</BrowserRouter>