-
GitHub / React gh-pages gitgub 배포 빌드 후 빈화면 / ConnectRouter baseURL history 설정방법Web dev/Git&Github 2022. 4. 11. 17:02728x90반응형
포트폴리오를 위해 gh-pages를 이용해 github에 배포했다.
배포하고 난 후에 흰화면에 아무것도 render 되지 않았다.
이유는 라우터설정때문이다. 이전 글에서는 BrowserRouter Basename을 설정해 문제를 해결했다.
하지만 나는 ConnectRouter를 사용했는데 basename을 지원하지않아 다르게 baseURL을 설정해야했다.
1. connected-react-router 설치
npm i connected-react-router
2. npm i history 설치
npm i history
3. createBrowserHistory 생성
import { createBrowserHistory } from 'history'; const history = createBrowserHistory({ basename: '/socar/', }); export default history;
app.js에서 써도 되는데 나는 따로 빼주었다.
4. ConnectRouter 적용
import { ConnectedRouter } from "connected-react-router"; import React from "react"; import { Route, Switch } from "react-router-dom"; import LoginPage from "./pages/LoginPage"; import MainPage from "./pages/MainPage"; import RegisterPage from "./pages/RegisterPage"; import history from "./history"; function App() { return ( <ConnectedRouter history={history} > <Switch> <Route exact path="/" component={MainPage} /> <Route exact path="/login" component={LoginPage}/> <Route exact path="/register" component={RegisterPage}/> </Switch> </ConnectedRouter> ); } export default App;
redux를 사용하기 위해 ConnectRouter를 쓴건데 정작 redux는 아직 습득하지 못했다..어렵다..
728x90반응형'Web dev > Git&Github' 카테고리의 다른 글
Git / github pull 덮어쓰기 (0) 2022.05.06 Git / 원경 저장소 확인, 연결 끊기 (git remote) (0) 2022.05.06 GitHub / React gh-pages 배포 빌드 후 빈화면 / BrowserRouter 라우팅 문제해결 (0) 2022.04.11 GitHub / React 배포 / gh-pages 사용하기 (0) 2022.04.11 Github / github 배포하기 / 레포지터리 생성 (0) 2022.04.11