react webpack build issue

webpack dev 버전으로 보면 잘 보이는데, build 후 dist file을 보면 화면에 잘 보이지 않는다.

 

이슈 원인: BrowerRouter가 제대로 build 되지 않았기 때문이다

이슈 해결: HashRouter를 사용한다.

 

as-is

import * as React from 'react';
import { Switch, BrowserRouter as Router, Route } from 'react-router-dom';

import Home from '../components/Home';
import DynamicPage from '../components/DynamicPage';

const App = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/dynamic" component={DynamicPage} />
      </Switch>
    </div>
  </Router>
);


export default App;

to-be

import * as React from 'react';
import { HashRouter, Switch, Route } from 'react-router-dom';

import Home from '../components/Home';
import DynamicPage from '../components/DynamicPage';

const App = () => (
  <HashRouter>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/dynamic" component={DynamicPage} />
    </Switch>
  </HashRouter>
);


export default App;