react-router frontend, fixing backend issues, adding /api

frontend/src/components/SideBar.js

@@ -1,5 +1,6 @@
 import React, {useState } from 'react';
 import { Navbar, Text, Group, ThemeIcon, Button, UnstyledButton } from '@mantine/core';
+import { Link } from 'react-router-dom';
 import { createStyles } from '@mantine/styles';
 import { BsMap } from 'react-icons/bs'
 
@@ -37,10 +38,6 @@ function SideBar(props) {
     const { classes } = useStyles();
     const [activePage, setActivePage] = useState("")
 
-    function handlePageChange(page) {
-        props.setCurrentPage(page)
-        setActivePage(page)
-      }
 
     return (
         <Navbar
@@ -51,14 +48,18 @@ function SideBar(props) {
             hidden={!props.opened}
             width={{ base: 200, breakpoints: { sm: '100%', lg: 300 } }}
         >
-            <UnstyledButton className={activePage === "locations" ? classes.activeButton : classes.button} onClick={() => handlePageChange("locations")} >
+            <Button leftIcon={<BsMap />} variant="white" className={activePage === "locations" ? classes.activeButton : classes.button} component={Link} to="/locations" onClick={() => setActivePage("locations")} >
+                Locations
+            </Button>
+
+            {/* <UnstyledButton component={Link} to="/locations" className={activePage === "locations" ? classes.activeButton : classes.button} >
                 <Group>
                     <BsMap />
                     <Text>Locations</Text>
                 </Group>
 
-            </UnstyledButton>
-            <UnstyledButton className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => handlePageChange("rooms")} >
+            </UnstyledButton> */}
+            <UnstyledButton component={Link} to="/about" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => setActivePage("rooms")} >
                 <Group>
                     <BsMap />
                     <Text>Rooms</Text>