[React] React-Router로 Git Page 설정하기

React 앱을 Git Page에 배포하면서 react-router를 이용해 라우터를 설정하고 Git page에 올리면 

Tada 하고 배포가 잘 될꺼 같지만 

빈화면이 나온다...

https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing

Deployment | Create React App

 

이유인즉슨 

GitHub Pages doesn’t support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory). 

대충 Git Hub Pages가 browserHistory를 지원하지 않는다 그런거 같네요...

그렇다고 포기할 수는 없쬬!!

---

1. HashRouter

BrowserRouter 말고 HashRouter를 쓰라고 합니다. 

 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { HashRouter } from 'react-router-dom'
 import App from './App';
 import './styles/index.css';

 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <HashRouter>
       <App />
     </HashRouter>
   </React.StrictMode>
 );

그리고 #을 추가해주라고 하는데 url 설정은 어떻게 하는지 몰라서 아직 성공하지 못했습니다.

그래서 저는 BrowserRouter 그대로 쓰면서 URL 이동이 잘 되는 방법을 찾았습니다.

 

2. Basename & 그리고 비법

Git Page를 올리기 위해서 package.json 파일에 homepage를 추가하는 것을 기억하시죠?

"homepage": "https://yeriel-ryu.github.io/[repository name]"

repository name을 Routes에 basename으로 추가해줍니다.

 

그런 후에 url에 basename을 추가하여 저장합니다.

다른 블로그에서는 이렇게 하면 다 된다고 하는데 저는 안되더라구요ㅠㅠ

그래서 조금더 검색해보고 해결책을 찾았습니다.

바로 Public 폴더에 있는 index.html파일에 script를 하나 추가해줘야합니다.

 

이제 다시 Git Page에 올려보면 Browser Router가 잘 작동되는 것을 확인할 수 있습니다.

---

그리고 React 버전도 중요합니다!!

2022.10.22. 기준 리액트는 버전 18까지 버전업 됬지만

이 코드는 React 17에서만 적용되는 방법입니다.

 

React 18도 Browser Router로 Git page에 빌드하는 방법을 찾는다면 다시 포스트 할 수 있도록 하겠습니다.