App.tsx, index.tsx

src/App.tsx

@@ -25,10 +25,11 @@ import { CreateIOCAccessControl } from "./views/IOC/CreateIOCAccessControl";
 import { UserDetailsAccessControl } from "./views/UserPage/UserDetailsAccessControl";
 import { ReduxProvider } from "./store/ReduxProvider";
 import env from "./config/env";
+import { GlobalAppBarContext as GlobalAppBarContextType } from "./types/common";
 
 // setting up the application (TAB)title
 function App() {
-  const { setTitle } = useContext(GlobalAppBarContext);
+  const { setTitle } = useContext<GlobalAppBarContextType>(GlobalAppBarContext);
   useEffect(() => setTitle(applicationTitle()), [setTitle]);
 
   return (
@@ -37,7 +38,7 @@ function App() {
         <BrowserRouter>
           <SnackbarProvider
             preventDuplicate
-            maxSnack="5"
+            maxSnack={5}
           >
             <StyledEngineProvider injectFirst>
               <ThemeProvider theme={theme}>
@@ -49,75 +50,62 @@ function App() {
                       <Route
                         path="/"
                         element={<Navigate to="/iocs" />}
-                        exact
                       />
                       <Route
                         path="/records"
                         element={<RecordListView />}
-                        exact
                       />
                       <Route
                         path="/records/:name"
                         element={<RecordDetailsView />}
-                        exact
                       />
                       <Route
                         path="/iocs/create"
                         element={<CreateIOCAccessControl />}
-                        exact
                       />
                       <Route
                         path="/iocs/:id"
-                        element={<IOCDetailsAccessControl exact />}
+                        element={<IOCDetailsAccessControl />}
                       />
                       <Route
                         path="/iocs"
                         element={<IOCListView />}
-                        exact
                       />
                       <Route
                         path="/jobs"
                         element={<JobLogAccessControl />}
-                        exact
                       />
                       <Route
                         path="/jobs/:id"
-                        element={<JobDetailsAccessControl exact />}
+                        element={<JobDetailsAccessControl />}
                       />
                       <Route
                         path="/hosts/:id"
                         element={<HostDetailsAccessControl />}
-                        exact
                       />
                       <Route
                         path="/hosts"
                         element={<HostListView />}
-                        exact
                       />
                       <Route
                         path="/help"
                         element={<HelpView />}
-                        exact
                       />
                       <Route
                         path="/login"
                         element={<LoginView />}
-                        exact
                       />
                       <Route
                         path="/error-test"
                         element={<TestErrorView />}
-                        exact
                       />
                       <Route
                         path="/user/:userName"
                         element={<UserDetailsAccessControl />}
-                        exact
                       />
                       <Route
                         path="*"
                         element={<NotFoundView />}
-                        exact
                       />
                     </Routes>
                   </NavigationMenu>

src/index.tsx

@@ -7,10 +7,14 @@ import App from "./App";
 LicenseInfo.setLicenseKey(import.meta.env.VITE_APP_MUI_PRO_LICENSE_KEY);
 
 const container = document.getElementById("root");
-const root = createRoot(container);
+if (container) {
+  const root = createRoot(container);
 
-root.render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
+  root.render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+} else {
+  throw new Error("No root element found");
+}