fix: Use Link component to resolve 404 error.

src/main/webui/src/components/AppRouter.test.tsx

@@ -1,10 +1,15 @@
 import React from "react";
 import { render } from "@testing-library/react";
 import AppRouter from "./AppRouter";
+import { BrowserRouter } from "react-router-dom";
 
 describe("<AppRouter /> spec", () => {
   it("renders the AppRouter", () => {
-    const view = render(<AppRouter />);
+    const view = render(
+      <BrowserRouter>
+        <AppRouter />
+      </BrowserRouter>
+    );
     expect(view).toMatchSnapshot();
   });
 });

src/main/webui/src/components/AppRouter.tsx

@@ -11,7 +11,6 @@ import NotFoundPage from "../views/404";
 const AppRouter = () => {
   const { isAdmin } = useUserContext();
   return (
-    <Router>
       <Routes>
         <Route path="/" element={<ModuleOverview />} />
         <Route path="/providers" element={<ProviderOverview />} />
@@ -38,7 +37,6 @@ const AppRouter = () => {
         />
         <Route path={"*"} element={<NotFoundPage />} />
       </Routes>
-    </Router>
   );
 };
 

src/main/webui/src/components/nav/NavigationDrawer.test.tsx

@@ -1,9 +1,14 @@
 import { render } from "@testing-library/react";
 import NavigationDrawer from "./NavigationDrawer";
+import { BrowserRouter } from "react-router-dom";
 
 describe("<NavigationDrawer /> spec", () => {
   it("renders the NavigationDrawer", () => {
-    const view = render(<NavigationDrawer />);
+    const view = render(
+      <BrowserRouter>
+        <NavigationDrawer />
+      </BrowserRouter>
+    );
     expect(view).toMatchSnapshot();
   });
 });

src/main/webui/src/components/nav/NavigationDrawer.tsx

@@ -7,12 +7,13 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
-  Toolbar,
+  Toolbar
 } from "@mui/material";
 import ViewModuleIcon from "@mui/icons-material/ViewModule";
 import AppsIcon from "@mui/icons-material/Apps";
 import KeyIcon from "@mui/icons-material/Key";
 import { useUserContext } from "../context/UserContext";
+import { Link } from "react-router-dom";
 
 const NavigationDrawer = () => {
   const { isAdmin } = useUserContext();
@@ -22,14 +23,14 @@ const NavigationDrawer = () => {
         width: 240,
         flexShrink: 0,
         "& .MuiDivider-root": {
-          display: "none",
+          display: "none"
         },
         "& .MuiDrawer-paper": {
           width: 240,
           boxSizing: "border-box",
           backgroundColor: "transparent",
-          border: "none",
-        },
+          border: "none"
+        }
       }}
       variant="permanent"
       anchor="left"
@@ -39,8 +40,8 @@ const NavigationDrawer = () => {
       <List>
         <ListItem
           key={"MenuItemModule"}
-          component={"a"}
-          href={"/"}
+          component={Link}
+          to={"/"}
           disablePadding
         >
           <ListItemButton>
@@ -52,8 +53,8 @@ const NavigationDrawer = () => {
         </ListItem>
         <ListItem
           key={"MenuItemProvider"}
-          component={"a"}
-          href={"/providers"}
+          component={Link}
+          to={"/providers"}
           disablePadding
         >
           <ListItemButton>
@@ -66,8 +67,8 @@ const NavigationDrawer = () => {
         {isAdmin ? (
           <ListItem
             key={"MenuItemManagement"}
-            component={"a"}
-            href={"/management"}
+            component={Link}
+            to={"/management"}
             disablePadding
           >
             <ListItemButton>

src/main/webui/src/index.tsx

@@ -12,6 +12,7 @@ import CssBaseline from "@mui/material/CssBaseline";
 import { Box, Stack } from "@mui/material";
 import NavigationDrawer from "./components/nav/NavigationDrawer";
 import { UserProvider } from "./components/context/UserContext";
+import { BrowserRouter as Router } from "react-router-dom";
 
 const fetchUser = async () => {
   const response = await fetch("/tapir/user");
@@ -21,20 +22,22 @@ const fetchUser = async () => {
 const user = await fetchUser();
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement,
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
     <CssBaseline />
     <UserProvider fetchedUser={user}>
       <Header />
       <Box sx={{ display: "flex" }}>
-        <NavigationDrawer />
-        <Stack spacing={2} m={"auto"} mt={"5vh"} sx={{ width: "75%" }}>
-          <AppRouter />
-        </Stack>
+        <Router>
+          <NavigationDrawer />
+          <Stack spacing={2} m={"auto"} mt={"5vh"} sx={{ width: "75%" }}>
+            <AppRouter />
+          </Stack>
+        </Router>
       </Box>
       <Footer />
     </UserProvider>
-  </React.StrictMode>,
+  </React.StrictMode>
 );