main.js

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

import NotFound404 from '../pages/404';
import Comedian from '../pages/comedian';
import Comedians from '../pages/comedians';
import Header from '../components/common/header';
import Home from '../pages/home';
import Watch from '../pages/watch';
import Search from '../pages/search';
import getPageName from '../utility/routing/pagename';
import { PATH } from '../utility/constants/path';
import Footer from '../components/common/footer';

function Content({ pagename }) {
  return (
    <div className={`content ${pagename}`}>
      <Switch>
        <Route exact path={PATH.HOME}>
          <Home />
        </Route>
        <Route exact path={PATH.COMEDIANS}>
          <Comedians />
        </Route>
        <Route exact path={`${PATH.COMEDIANS}/:comedianId`}>
          <Comedian />
        </Route>
        <Route exact path={`${PATH.WATCH}/:videoId`}>
          <Watch />
        </Route>
        <Route exact path={PATH.SEARCH}>
          <Search />
        </Route>
        <Route>
          <NotFound404 />
        </Route>
      </Switch>
    </div>
  );
}

function Page() {
  const pagename = getPageName();

  return (
    <div className="page">
      <Header pagename={pagename} />
      <Content pagename={pagename} />
      <Footer pagename={pagename} />
    </div>
  );
}

export default function RoutesMain() {
  return (
    <Router>
      <Page />
    </Router>
  );
}