App.js

import {createBrowserHistory} from 'history';
import {Router, Route, Switch} from 'react-router-dom';

import './App.css';
import pageLogin from './pages/page.login';
import pageDefault from './pages/page.default';
import pageRelease from './pages/page.release';
import pageBookDetail from './pages/page.book.detail';
import pageSignup from './pages/page.signup';
import pageRequestList from './pages/page.request.list';
import pageBorrowList from './pages/page.borrow.list';
import pageMyHome from './pages/page.my';
import pageCategory from './pages/page.category';
import Header from './components/component.header';

const history = createBrowserHistory();

function App() {
  return (
    <div className="App">
      <Router history={history}>
        <div className="row">
          <div className="col"></div>
          <div className="pageBody">
            <Header history={history} />
            <Switch>
              <Route path="/" exact component={pageDefault} />
              <Route path="/login" exact component={pageLogin} />
              <Route path="/signup" exact component={pageSignup} />
              <Route path="/category" exact component={pageCategory} />
              <Route path="/book/release" exact component={pageRelease} />
              <Route path="/book/detail/:id" exact component={pageBookDetail} />
              <Route path="/request/list" exact component={pageRequestList} />
              <Route path="/borrow/list" exact component={pageBorrowList} />
              <Route path="/my/home" exact component={pageMyHome} />
            </Switch>
          </div>
          <div className="col"></div>
        </div>
      </Router>
    </div>
  );
}

export default App;