import React, { useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; import Dashboard from "./dashboard/Dashboard"; import ViewEvents from "./events/view-events/ViewEvents"; import CreateEvent from "./events/create-event/CreateEvent"; import FullEvent from "./events/single-event/FullEvent"; function VariableMainContent(props) { const location = useLocation(); const [urlLocation, setUrlLocation] = useState( location.pathname.split("/")[1] ); useEffect(() => { setUrlLocation(location.pathname.split("/")[1]); }, [location]); switch (urlLocation) { case !urlLocation: return <p>homepage</p>; case "grid": return <Dashboard />; case "dashboard": return <Dashboard />; case "create-event": return <CreateEvent />; case "view-events": return <ViewEvents />; case "events": return <FullEvent {...props} />; default: return <p>you did a bad</p>; } } export default VariableMainContent;