App.jsx

import React from "react";
import styled, { createGlobalStyle } from "styled-components";
import { BrowserRouter as Router, Switch, Route, Link, useRouteMatch } from "react-router-dom";

// Components
import Home from "./Home.jsx";
import About from "./About.jsx";
import Proyects from "./Proyects.jsx";
import Contact from "./Contact.jsx";
import {CustomPaper} from "./styledComponents";

// Material UI
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";

// Styled-Component
const GlobalStyle = createGlobalStyle`
html{
  line-height: 1.15; 
  -webkit-text-size-adjust: 100%; 
  }
body {
    padding: 0px;
    margin: 0px;
    background-color: #fafafa;
  }
`;
const CustomLink = styled(Link)`
  text-decoration: none;
  color: #fafafa;
  font-family: "Poppins", sans-serif;
  &:hover {
    border-bottom: 2px solid #ffab00;
    background-color: #ffab00;
  }
`;

const LogicalContainer = _props => {
  const { path, url } = useRouterMatch()

  return (
    <CustomPaper>
      <Tabs>
        <CustomLink to="/">
          <Tab label="Home" />
        </CustomLink>
        <CustomLink to="about">
          <Tab label="About" />
        </CustomLink>
        <CustomLink to="proyects">
          <Tab label="Proyects" />
        </CustomLink>
        <CustomLink to="contact">
          <Tab label="Contact" />
        </CustomLink>
      </Tabs>
    </CustomPaper>

    <Switch>
      <Route path="/contact">
        <Contact />
      </Route>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/proyects">
        <Proyects />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  )
}

const App = () => {
  return (
    <>
      <GlobalStyle />
      <Router>
        <LogicalContainer />
      </Router>
    </>
  );
};

export default App;