cdn-frontend/src/components/Layout/Content.js

import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import classnames from "classnames";

// pages
import Dashboard from "../../pages/dashboard/Dashboard";
import Typography from "../../pages/typography/Typography";
import Notifications from "../../pages/notifications/Notifications";
import Maps from "../../pages/maps/Maps";
import Tables from "../../pages/tables/Tables";
import Icons from "../../pages/icons/Icons";
import Charts from "../../pages/charts/Charts";
import ContentFooter from "./ContentFooter";

// context
import { useLayoutState } from "../../context/LayoutContext";

// styles
import useStyles from "./styles";

const Content = () => {
  // global
  var layoutState = useLayoutState();
  var classes = useStyles();

  return (
    <div
      className={classnames(classes.content, {
        [classes.contentShift]: layoutState.isSidebarOpened
      })}
    >
      <div className={classes.fakeToolbar} />
      <Switch>
        <Route path="/app/dashboard" component={Dashboard} />
        <Route path="/app/typography" component={Typography} />
        <Route path="/app/tables" component={Tables} />
        <Route path="/app/notifications" component={Notifications} />
        <Route
          exact
          path="/app/ui"
          render={() => <Redirect to="/app/ui/icons" />}
        />
        <Route path="/app/ui/maps" component={Maps} />
        <Route path="/app/ui/icons" component={Icons} />
        <Route path="/app/ui/charts" component={Charts} />
      </Switch>
      <ContentFooter />
    </div>
  );
};

export default Content;