[React] github pages 배포시 router오류

라우터를 이용한 리액트 서브페이지 작업을 마치고 로컬에서 정상 작동을 확인했으나

gitpage에 올렸더니 작동되지 않았던 문제의 해결과정을 적어보려 합니다.

이래저래 바꿔보다보니 제가 만났던 문제는 아래 세가지 정도 였네요.

 

 

1. README.md 파일 노출

2. 저장소 기본경로로 인한 라우팅 경로 오류

3. BrowserRouter 오류

 

 

---

 

1. README.md 파일 노출

 

아예 내 프로젝트가 뜨지않고 깃헙에 올린 MD파일만 나오는 경우.

 

이건 뭐 라우터랑 상관없는 어이없는 실수인데 검색하다 많이 나오길래 써봅니다.

왜 안돼지 하고 브랜치랑 폴더 막 바꿔가며 빌드 하던 와중 생긴 오류로

빌드경로를 잘못 선택해서 발생한 문제 입니다.

(로컬에서 빌드했다면 저장소에 올리기만 해도 반영된다)

 

제 경우는 master 브랜치의 root에서 시작되고

각자 경로에 맞게 잘 선택해서 빌드 하면 됩니다.

 

 

 

 

2. 저장소 기본경로로 인한 라우팅 경로 오류

 

이 경우는 화면에 라우터를 적용한 컴포넌트만 뜨지 않게 됩니다.

제 프로젝트에서는 푸터가 공통으로 나와서 푸터에 라우터를 적용하지 않았는데,

깃페이지를 열어보니 라우터를 적용한 나머지 컴포넌트는 뜨지 않고 달랑 푸터만 나왔었습니다.

 

처음 개발시에는 보통 localhost:3000등에서 작업을 하게되는데,

생성한 깃 페이지는 깃허브 저장소 이름 기준으로 기본 경로가 되어있어 발생한 문제입니다.

 

 

로컬기준 저는 '루트/경로' 로 개발하였고,

깃페이지에는 '루트/저장소 기본주소/경로' 가 나오니 주소가 맞지 않는것.

(사실 프로젝트에 router도입할때 pakage.json의 homepage나 name수정하면서 기본 페이지가 저렇게 떴었는데 뭐야 왜이래 하면서 꾸역꾸역 주소바꿔가며 루트에서 작업했었음.........)

 

<BrowserRouter basename={process.env.PUBLIC_URL}>
  <Routes>
    <Route exact path="/" element={<LandingPage />} />
    <Route path="/:movieId" element={<DetailPage />} />
  </Routes>
</BrowserRouter>

 

basename을 이용하면 기본으로 나오는 주소를 셋팅해줘서 수정완료.

아예 위 Route의 path에 기본주소를 수동으로 입력해서 고치는 글들도 봤으나 안해봐서 되는지는 모르겠네요.

 

로컬에서 url 잘 나오는거 확인하고 저장소 올렸으나 또 서브페이지가 열리지 않음..........

 

 

 

3. BrowserRouter 오류

 

BrowserRouter를 깃허브에서 사용할수 없다고 합니다!

대신 HashRouter사용.

BrowserRouter를 HashRouter로만 바꿔주고(basename도 필요없음)

서브페이지로 넘어가는 링크경로에도 #포함해줍니다.

 

//App.js
<HashRouter>
  <Routes>
    <Route path="/" element={<LandingPage />} />
    <Route path="/:movieId" element={<DetailPage />} />
  </Routes>
</HashRouter>

//SubPage.js
<a href={`/movie-app/#/${props.movieId}`}>

 

보통 BrowserRouter나 HashRouter를 사용하는데 #이 붙어서 지저분해 진다길래

BrowserRouter를 사용한것이 잘못된 선택이엽죠...

 

요래 어찌어찌 완성!

호스팅을 바뀌야 하나 했는데.. 그래도 하다보니 안되는건 없네요

정신없는 글 읽어주셔서 감사합니다