import React, { ReactElement } from "react"; import { useLocation, useHistory } from "react-router-dom"; import Abm from "./Abm/index"; import Login from "./Login/index"; import Layout from "./Layout/index"; import Home from "./Home/index"; import { Button, Typography } from "@material-ui/core"; import { constants, session } from "utils"; interface HomeProps { children: any; } const NoMatch = (): ReactElement => { const location = useLocation(); const { isAuthorized, clearStorage } = session; const { ROUTES } = constants; const history = useHistory(); const handleLinkClick = (path: string): void => { history.push(path); }; return ( <div style={{ height: "100vh", display: "flex", alignItems: "center", justifyContent: "center", }} > <div style={{ padding: "150px 50px 150px 50px", borderRadius: "10px", boxShadow: "2px 2px 10px #666 ", textAlign: "center", }} > <Typography variant="h6"> La ruta <code>{location.pathname}</code> es inválida </Typography> <Button style={{ color: "#00ff8b", borderColor: "#00ff8b", fontWeight: "bold", }} variant="outlined" onClick={() => handleLinkClick(ROUTES.HOME)} > Volver al inicio </Button> </div> </div> ); }; export { Abm, Home, Layout, Login, NoMatch };