GitHub / React gh-pages gitgub 배포 빌드 후 빈화면 / ConnectRouter baseURL history 설정방법

포트폴리오를 위해 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는 아직 습득하지 못했다..어렵다..