fix: check for service in storage

Author: tsmith123

apps/router/src/App.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  Navigate,
+} from 'react-router-dom';
+import { useAppContext } from './hooks';
 import { GuardianContextProvider } from './context/guardian/GuardianContext';
 import { GatewayContextProvider } from './context/gateway/GatewayContext';
 import { Guardian } from './guardian-ui/Guardian';
@@ -8,28 +14,38 @@ import { Wrapper } from './components/Wrapper';
 import HomePage from './pages/Home';
 
 export default function App() {
+  const { service } = useAppContext();
+
   return (
     <Router>
       <Routes>
         <Route path='/' element={<HomePage />} />
         <Route
           path='/guardians/:id'
           element={
-            <Wrapper>
-              <GuardianContextProvider>
-                <Guardian />
-              </GuardianContextProvider>
-            </Wrapper>
+            service ? (
+              <Wrapper>
+                <GuardianContextProvider>
+                  <Guardian />
+                </GuardianContextProvider>
+              </Wrapper>
+            ) : (
+              <Navigate replace to='/' />
+            )
           }
         />
         <Route
           path='/gateways/:id'
           element={
-            <Wrapper>
-              <GatewayContextProvider>
-                <Gateway />
-              </GatewayContextProvider>
-            </Wrapper>
+            service ? (
+              <Wrapper>
+                <GatewayContextProvider>
+                  <Gateway />
+                </GatewayContextProvider>
+              </Wrapper>
+            ) : (
+              <Navigate replace to='/' />
+            )
           }
         />
       </Routes>