src/App.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { BrowserRouter, Route, Routes} from 'react-router-dom';
+import { BrowserRouter, Navigate, Route, Routes} from 'react-router-dom';
 
 import './css/App.css';
 import Home from './pages/Home';
@@ -9,6 +9,10 @@ import UserControls from './components/UserControls';
 import { useLoginContext } from './structures/UserContext';
 import Login from './pages/Login';
 import { fetchUser } from './util/Util';
+import PrivateRoute from './structures/PrivateRoute';
+import { UnauthedRoute } from './structures/UnauthedRoute';
+import Users from './pages/Users';
+import Admin from './pages/Admin';
 
 function App() {
 
@@ -19,7 +23,7 @@ function App() {
   }, []);
 
   const menuItems = [
-    { to: '/', label: 'Home' },
+    { to: '/home', label: 'Home' },
     { to: '/users', label: 'Users' },
     { to: '/admin', label: 'Admin' }
 
@@ -32,22 +36,25 @@ function App() {
         <UserControls />
       </header>
       
-      {user ?
+      <div className='background'>
-        <div className='background'>
 
           <BrowserRouter>
 
+          {user ? 
             <Sidebar>
               SIDEBAR
-              <SidebarMenu menuItems={menuItems}>
+              <SidebarMenu menuItems={menuItems} />
-
-              </SidebarMenu>
             </Sidebar>
+            : null}
 
             <div className='main-content'>
               <ErrorBoundary>
                 <Routes>
-                  <Route exact path='/' element={<Home />} />
+                <Route path='/home/*' element={<PrivateRoute><Home /></PrivateRoute >} />
+                <Route path='/users/*' element={<PrivateRoute><Users /></PrivateRoute >} />
+                <Route path='/admin/*' element={<PrivateRoute><Admin /></PrivateRoute >} />
+                <Route path='/login/*' element={<UnauthedRoute><Login /></UnauthedRoute>} />
+                <Route path='*' element={<Navigate to='/home' />} />
                 </Routes>
               </ErrorBoundary>
             </div>
@@ -56,7 +63,6 @@ function App() {
           </BrowserRouter>
 
         </div>
-      : <Login />}
     
     </div>
   );