gh-pages 배포시 참고

맨날 틀리는 거!!!!!!!!!
이 바보 ㅠㅠ

에러
gh-pages 에서 배포 시 react-router-dom 의 BrowserRouter 을 쓰면 화면이 안나오고 에러가 나올 수가 있다고 한다.

1. gh-pages 에서는 BrowserRouter 대신 HashRouter 을 쓰는 것을 권장한다고 한다

HashRouter을 사용하면 URL 에 #이 붙게 되는데 이것이 마음에 들지 않는다면 다른 방법도 있다.

2. BrowserRouter에 basename을 추가한다

basename props를 추가함으로써 프로젝트의 기본 URL을 설정할 수 있다.

즉 라우터한테 기본 URL을 제공하여 “/”이 아닌 레포지토리 주소 “/react-deploy-test/”로 이동하라고 지시하는 것이다. 이렇게 하면 github pages를 이용한 React 프로젝트 배포 시 생기는 라우팅 오류를 없앨 수 있다.

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

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

해결

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./Pages/Login";
import Main from "./Pages/Main";
import Post from "./Pages/Post";
import Edit from "./Pages/Edit";

function App() {
  return (
    <div className="App">
      <BrowserRouter basename="to-do-list-project"> // 이 부분!!!
        <Routes>
          <Route path="/main" element={<Main />}></Route>
          <Route path="/edit/:id" element={<Edit />}></Route>
          <Route path="/post" element={<Post />}></Route>
          <Route path="/" element={<Login />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;