From fb600a8ef5ab65e208e20ff1ddf8a77a85388bc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Beye?= <github@hypfer.de>
Date: Sun, 13 Oct 2024 13:09:07 +0200
Subject: [PATCH] chore: Upgrade react-router v5 to v6

---
 frontend/package.json                         |   3 +-
 frontend/src/AppRouter.tsx                    |  26 +-
 frontend/src/components/ValetudoAppBar.tsx    |  90 +++---
 .../src/options/ConnectivityOptionsRouter.tsx |  37 +++
 .../options/MapManagementOptionsRouter.tsx    |  57 ++++
 frontend/src/options/OptionsRouter.tsx        | 114 +------
 frontend/src/options/RobotOptionsRouter.tsx   |  20 ++
 frontend/src/robot/RobotRouter.tsx            |  27 +-
 frontend/src/valetudo/ValetudoRouter.tsx      |  39 +--
 package-lock.json                             | 277 +++---------------
 package.json                                  |   2 +-
 11 files changed, 241 insertions(+), 451 deletions(-)
 create mode 100644 frontend/src/options/ConnectivityOptionsRouter.tsx
 create mode 100644 frontend/src/options/MapManagementOptionsRouter.tsx
 create mode 100644 frontend/src/options/RobotOptionsRouter.tsx

diff --git a/frontend/package.json b/frontend/package.json
index d60cb3f0b80..d35aa283cfa 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -52,7 +52,7 @@
     "rehype-raw": "7.0.0",
     "react-markdown": "9.0.1",
     "remark-gfm": "4.0.0",
-    "react-router-dom": "5.3.3",
+    "react-router-dom": "6.27.0",
     "react-scripts": "5.0.1",
     "semaphore": "1.1.0",
     "use-long-press": "3.2.0",
@@ -63,7 +63,6 @@
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@types/react": "18.3.8",
     "@types/react-dom": "18.3.0",
-    "@types/react-router-dom": "5.3.3",
     "@types/uuid": "10.0.0",
     "tsutils": "3.21.0",
     "cra-build-watch": "git+https://npm@github.com/Hypfer/cra-build-watch.git#5.0.0"
diff --git a/frontend/src/AppRouter.tsx b/frontend/src/AppRouter.tsx
index 3650080c272..f66770319e5 100644
--- a/frontend/src/AppRouter.tsx
+++ b/frontend/src/AppRouter.tsx
@@ -1,4 +1,4 @@
-import {HashRouter, Redirect, Route, Switch} from "react-router-dom";
+import {HashRouter, Navigate, Route, Routes} from "react-router-dom";
 import Div100vh from "react-div-100vh";
 import HomePage from "./HomePage";
 import OptionsRouter from "./options";
@@ -31,23 +31,13 @@ const AppRouter: React.FunctionComponent<{ paletteMode: PaletteMode, setPaletteM
             <Root>
                 <Content>
                     <ValetudoAppBar paletteMode={paletteMode} setPaletteMode={setPaletteMode}/>
-                    <Switch>
-                        <Route exact path="/">
-                            <HomePage/>
-                        </Route>
-                        <Route path="/robot">
-                            <RobotRouter/>
-                        </Route>
-                        <Route path="/options">
-                            <OptionsRouter/>
-                        </Route>
-                        <Route path="/valetudo">
-                            <ValetudoRouter/>
-                        </Route>
-                        <Route path="*">
-                            <Redirect to="/"/>
-                        </Route>
-                    </Switch>
+                    <Routes>
+                        <Route path="" element={<HomePage />} />
+                        <Route path="robot/*" element={<RobotRouter />} />
+                        <Route path="options/*" element={<OptionsRouter />} />
+                        <Route path="valetudo/*" element={<ValetudoRouter />} />
+                        <Route path="*" element={<Navigate to="/" />} />
+                    </Routes>
                 </Content>
             </Root>
         </HashRouter>
diff --git a/frontend/src/components/ValetudoAppBar.tsx b/frontend/src/components/ValetudoAppBar.tsx
index 01f07570804..120531fa1b0 100644
--- a/frontend/src/components/ValetudoAppBar.tsx
+++ b/frontend/src/components/ValetudoAppBar.tsx
@@ -37,7 +37,7 @@ import {
     Help as HelpIcon,
     SvgIconComponent
 } from "@mui/icons-material";
-import {Link, useRouteMatch} from "react-router-dom";
+import {Link, useLocation} from "react-router-dom";
 import ValetudoEvents from "./ValetudoEvents";
 import {Capability} from "../api";
 import {useCapabilitiesSupported} from "../CapabilitiesProvider";
@@ -49,7 +49,7 @@ import {
 
 interface MenuEntry {
     kind: "MenuEntry";
-    routeMatch: string;
+    route: string;
     title: string;
     menuIcon: SvgIconComponent;
     menuText: string;
@@ -61,7 +61,7 @@ interface MenuEntry {
 
 interface MenuSubEntry {
     kind: "MenuSubEntry",
-    routeMatch: string,
+    route: string,
     title: string,
     parentRoute: string
 }
@@ -77,7 +77,7 @@ interface MenuSubheader {
 const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
     {
         kind: "MenuEntry",
-        routeMatch: "/",
+        route: "/",
         title: "Home",
         menuIcon: HomeIcon,
         menuText: "Home"
@@ -88,7 +88,7 @@ const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
     },
     {
         kind: "MenuEntry",
-        routeMatch: "/robot/consumables",
+        route: "/robot/consumables",
         title: "Consumables",
         menuIcon: PendingActionsIcon,
         menuText: "Consumables",
@@ -99,7 +99,7 @@ const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
     },
     {
         kind: "MenuEntry",
-        routeMatch: "/robot/manual_control",
+        route: "/robot/manual_control",
         title: "Manual control",
         menuIcon: SettingsRemoteIcon,
         menuText: "Manual control",
@@ -110,7 +110,7 @@ const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
     },
     {
         kind: "MenuEntry",
-        routeMatch: "/robot/total_statistics",
+        route: "/robot/total_statistics",
         title: "Statistics",
         menuIcon: StatisticsIcon,
         menuText: "Statistics",
@@ -125,7 +125,7 @@ const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
     },
     {
         kind: "MenuEntry",
-        routeMatch: "/options/map_management",
+        route: "/options/map_management",
         title: "Map Options",
         menuIcon: MapManagementIcon,
         menuText: "Map",
@@ -145,81 +145,81 @@ const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
     },
     {
         kind: "MenuSubEntry",
-        routeMatch: "/options/map_management/segments",
+        route: "/options/map_management/segments",
         title: "Segment Management",
         parentRoute: "/options/map_management"
     },
     {
         kind: "MenuSubEntry",
-        routeMatch: "/options/map_management/virtual_restrictions",
+        route: "/options/map_management/virtual_restrictions",
         title: "Virtual Restriction Management",
         parentRoute: "/options/map_management"
     },
     {
         kind: "MenuSubEntry",
-        routeMatch: "/options/map_management/robot_coverage",
+        route: "/options/map_management/robot_coverage",
         title: "Robot Coverage Map",
         parentRoute: "/options/map_management"
     },
     {
         kind: "MenuEntry",
-        routeMatch: "/options/connectivity",
+        route: "/options/connectivity",
         title: "Connectivity Options",
         menuIcon: ConnectivityIcon,
         menuText: "Connectivity"
     },
     {
         kind: "MenuSubEntry",
-        routeMatch: "/options/connectivity/auth",
+        route: "/options/connectivity/auth",
         title: "Auth Settings",
         parentRoute: "/options/connectivity"
     },
     {
         kind: "MenuSubEntry",
-        routeMatch: "/options/connectivity/mqtt",
+        route: "/options/connectivity/mqtt",
         title: "MQTT Connectivity",
         parentRoute: "/options/connectivity"
     },
     {
         kind: "MenuSubEntry",
-        routeMatch: "/options/connectivity/networkadvertisement",
+        route: "/options/connectivity/networkadvertisement",
         title: "Network Advertisement",
         parentRoute: "/options/connectivity"
     },
     {
         kind: "MenuSubEntry",
-        routeMatch: "/options/connectivity/ntp",
+        route: "/options/connectivity/ntp",
         title: "NTP Connectivity",
         parentRoute: "/options/connectivity"
     },
     {
         kind: "MenuSubEntry",
-        routeMatch: "/options/connectivity/wifi",
+        route: "/options/connectivity/wifi",
         title: "Wi-Fi Connectivity",
         parentRoute: "/options/connectivity"
     },
     {
         kind: "MenuEntry",
-        routeMatch: "/options/robot",
+        route: "/options/robot",
         title: "Robot Options",
         menuIcon: RobotMonochromeIcon,
         menuText: "Robot"
     },
     {
         kind: "MenuSubEntry",
-        routeMatch: "/options/robot/misc",
+        route: "/options/robot/misc",
         title: "Misc Options",
         parentRoute: "/options/robot"
     },
     {
         kind: "MenuSubEntry",
-        routeMatch: "/options/robot/quirks",
+        route: "/options/robot/quirks",
         title: "Quirks",
         parentRoute: "/options/robot"
     },
     {
         kind: "MenuEntry",
-        routeMatch: "/options/valetudo",
+        route: "/options/valetudo",
         title: "Valetudo Options",
         menuIcon: ValetudoMonochromeIcon,
         menuText: "Valetudo"
@@ -230,42 +230,42 @@ const menuTree: Array<MenuEntry | MenuSubEntry | MenuSubheader> = [
     },
     {
         kind: "MenuEntry",
-        routeMatch: "/valetudo/timers",
+        route: "/valetudo/timers",
         title: "Timers",
         menuIcon: TimeIcon,
         menuText: "Timers"
     },
     {
         kind: "MenuEntry",
-        routeMatch: "/valetudo/log",
+        route: "/valetudo/log",
         title: "Log",
         menuIcon: LogIcon,
         menuText: "Log"
     },
     {
         kind: "MenuEntry",
-        routeMatch: "/valetudo/updater",
+        route: "/valetudo/updater",
         title: "Updater",
         menuIcon: UpdaterIcon,
         menuText: "Updater"
     },
     {
         kind: "MenuEntry",
-        routeMatch: "/valetudo/system_information",
+        route: "/valetudo/system_information",
         title: "System Information",
         menuIcon: SystemInformationIcon,
         menuText: "System Information"
     },
     {
         kind: "MenuEntry",
-        routeMatch: "/valetudo/help",
+        route: "/valetudo/help",
         title: "General Help",
         menuIcon: HelpIcon,
         menuText: "General Help"
     },
     {
         kind: "MenuEntry",
-        routeMatch: "/valetudo/about",
+        route: "/valetudo/about",
         title: "About Valetudo",
         menuIcon: AboutIcon,
         menuText: "About Valetudo"
@@ -277,42 +277,34 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
     setPaletteMode
 }): React.ReactElement => {
     const [drawerOpen, setDrawerOpen] = React.useState<boolean>(false);
+    const currentLocation = useLocation()?.pathname;
     const robotCapabilities = useCapabilitiesSupported(...Object.values(Capability));
 
-    const routeMatch = useRouteMatch(menuTree.filter(e => {
-        return "routeMatch" in e;
-    }).map(e => {
-        // Make TS happy
-        return "routeMatch" in e ? e.routeMatch : "";
-    }).reverse()); // Reverse because order is important (deep => shallow)
-    const currentTab = routeMatch?.path;
-
-    const currentMenuEntry = menuTree.find(e => {
-        return "routeMatch" in e && e.routeMatch === routeMatch?.path;
-    }) ?? menuTree[0];
+    //@ts-ignore
+    const currentMenuEntry = menuTree.find(element => element.route === currentLocation) ?? menuTree[0];
 
     const pageTitle = React.useMemo(() => {
         let ret = "";
 
-        menuTree.forEach((value) => {
-            if ("routeMatch" in value && value.routeMatch === currentTab && value.title) {
+        menuTree.forEach((element) => {
+            //@ts-ignore
+            if (currentLocation.includes(element.route) && element.route !== "/" && element.title) {
                 if (ret !== "") {
-                    ret += " — ";
+                    ret += " - ";
                 }
 
-                ret += value.title;
+                ret += element.title;
             }
         });
 
-
         if (ret !== "") {
             document.title = `Valetudo - ${ret}`;
         } else {
             document.title = "Valetudo";
         }
 
-        return ret;
-    }, [currentTab]);
+        return currentMenuEntry.title;
+    }, [currentLocation, currentMenuEntry]);
 
     const drawerContent = React.useMemo(() => {
         return (
@@ -376,10 +368,10 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
 
                                 return (
                                     <ListItemButton
-                                        key={value.routeMatch}
-                                        selected={value.routeMatch === currentTab}
+                                        key={value.route}
+                                        selected={value.route === currentLocation}
                                         component={Link}
-                                        to={value.routeMatch}
+                                        to={value.route}
                                     >
                                         <ListItemIcon>
                                             <ItemIcon/>
@@ -461,7 +453,7 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
                 </List>
             </Box>
         );
-    }, [currentTab, paletteMode, setPaletteMode, robotCapabilities]);
+    }, [currentLocation, paletteMode, setPaletteMode, robotCapabilities]);
 
     const toolbarContent = React.useMemo(() => {
         switch (currentMenuEntry.kind) {
diff --git a/frontend/src/options/ConnectivityOptionsRouter.tsx b/frontend/src/options/ConnectivityOptionsRouter.tsx
new file mode 100644
index 00000000000..1ca6a117482
--- /dev/null
+++ b/frontend/src/options/ConnectivityOptionsRouter.tsx
@@ -0,0 +1,37 @@
+import {Route} from "react-router";
+import {Navigate, Routes} from "react-router-dom";
+import {useCapabilitiesSupported} from "../CapabilitiesProvider";
+import {Capability} from "../api";
+import ConnectivityOptions from "./connectivity/ConnectivityOptions";
+import NTPConnectivityPage from "./connectivity/NTPConnectivityPage";
+import AuthSettingsPage from "./connectivity/AuthSettingsPage";
+import WifiConnectivityPage from "./connectivity/WifiConnectivityPage";
+import NetworkAdvertisementSettingsPage from "./connectivity/NetworkAdvertisementSettingsPage";
+import React from "react";
+import MQTTConnectivityPage from "./connectivity/MQTTConnectivityPage";
+
+const OptionsRouter = (): React.ReactElement => {
+    const [
+        wifiConfigurationCapabilitySupported,
+    ] = useCapabilitiesSupported(
+        Capability.WifiConfiguration
+    );
+
+    return (
+        <Routes>
+            <Route path={""} element={<ConnectivityOptions />} />
+            <Route path={"auth"} element={<AuthSettingsPage />} />
+            <Route path={"mqtt"} element={<MQTTConnectivityPage />} />
+            <Route path={"networkadvertisement"} element={<NetworkAdvertisementSettingsPage />} />
+            <Route path={"ntp"} element={<NTPConnectivityPage />} />
+
+            {wifiConfigurationCapabilitySupported && (
+                <Route path={"wifi"} element={<WifiConnectivityPage />} />
+            )}
+
+            <Route path="*" element={<Navigate to="/" />} />
+        </Routes>
+    );
+};
+
+export default OptionsRouter;
diff --git a/frontend/src/options/MapManagementOptionsRouter.tsx b/frontend/src/options/MapManagementOptionsRouter.tsx
new file mode 100644
index 00000000000..a92b344052e
--- /dev/null
+++ b/frontend/src/options/MapManagementOptionsRouter.tsx
@@ -0,0 +1,57 @@
+import {Route} from "react-router";
+import {Navigate, Routes} from "react-router-dom";
+import MapManagement from "./MapManagement";
+import EditMapPage from "../map/EditMapPage";
+import {useCapabilitiesSupported} from "../CapabilitiesProvider";
+import {Capability} from "../api";
+import React from "react";
+import RobotCoverageMapPage from "../map/RobotCoverageMapPage";
+
+const OptionsRouter = (): React.ReactElement => {
+    const [
+        combinedVirtualRestrictionsCapabilitySupported,
+
+        mapSegmentEditCapabilitySupported,
+        mapSegmentRenameCapabilitySupported
+    ] = useCapabilitiesSupported(
+        Capability.CombinedVirtualRestrictions,
+
+        Capability.MapSegmentEdit,
+        Capability.MapSegmentRename
+    );
+
+    return (
+        <Routes>
+            <Route path={""} element={<MapManagement />}/>
+
+            {
+                (mapSegmentEditCapabilitySupported || mapSegmentRenameCapabilitySupported) &&
+                <Route
+                    path={"segments"}
+                    element={
+                        <EditMapPage
+                            mode={"segments"}
+                        />
+                    }
+                />
+            }
+            {
+                combinedVirtualRestrictionsCapabilitySupported &&
+                <Route
+                    path={"virtual_restrictions"}
+                    element={
+                        <EditMapPage
+                            mode={"virtual_restrictions"}
+                        />
+                    }
+                />
+            }
+
+            <Route path={"robot_coverage"} element={<RobotCoverageMapPage/>}/>
+
+            <Route path="*" element={<Navigate to="/" />} />
+        </Routes>
+    );
+};
+
+export default OptionsRouter;
diff --git a/frontend/src/options/OptionsRouter.tsx b/frontend/src/options/OptionsRouter.tsx
index 4fb6c7d4d32..5f1b014361b 100644
--- a/frontend/src/options/OptionsRouter.tsx
+++ b/frontend/src/options/OptionsRouter.tsx
@@ -1,113 +1,23 @@
-import {Route, Switch} from "react-router";
-import {useRouteMatch} from "react-router-dom";
-import MapManagement from "./MapManagement";
-import EditMapPage from "../map/EditMapPage";
-import {useCapabilitiesSupported} from "../CapabilitiesProvider";
-import {Capability} from "../api";
-import ConnectivityOptions from "./connectivity/ConnectivityOptions";
-import NTPConnectivityPage from "./connectivity/NTPConnectivityPage";
-import AuthSettingsPage from "./connectivity/AuthSettingsPage";
-import WifiConnectivityPage from "./connectivity/WifiConnectivityPage";
-import NetworkAdvertisementSettingsPage from "./connectivity/NetworkAdvertisementSettingsPage";
-import RobotCoverageMapPage from "../map/RobotCoverageMapPage";
+import {Route} from "react-router";
+import {Navigate, Routes} from "react-router-dom";
 import ValetudoOptions from "./ValetudoOptions";
 import React from "react";
-import RobotOptions from "../robot/RobotOptions";
-import MiscRobotOptions from "../robot/capabilities/MiscRobotOptions";
-import Quirks from "../robot/capabilities/Quirks";
-import MQTTConnectivityPage from "./connectivity/MQTTConnectivityPage";
+import ConnectivityOptionsRouter from "./ConnectivityOptionsRouter";
+import MapManagementOptionsRouter from "./MapManagementOptionsRouter";
+import RobotOptionsRouter from "./RobotOptionsRouter";
 
 const OptionsRouter = (): React.ReactElement => {
-    const {path} = useRouteMatch();
-
-    const [
-        wifiConfigurationCapabilitySupported,
-
-        combinedVirtualRestrictionsCapabilitySupported,
-
-        mapSegmentEditCapabilitySupported,
-        mapSegmentRenameCapabilitySupported
-    ] = useCapabilitiesSupported(
-        Capability.WifiConfiguration,
-
-        Capability.CombinedVirtualRestrictions,
-
-        Capability.MapSegmentEdit,
-        Capability.MapSegmentRename
-    );
-
 
     return (
-        <Switch>
-            <Route exact path={path + "/map_management"}>
-                <MapManagement/>
-            </Route>
-
-            {
-                (mapSegmentEditCapabilitySupported || mapSegmentRenameCapabilitySupported) &&
-                <Route exact path={path + "/map_management/segments"}>
-                    <EditMapPage
-                        mode={"segments"}
-                    />
-                </Route>
-            }
-            {
-                combinedVirtualRestrictionsCapabilitySupported &&
-                <Route exact path={path + "/map_management/virtual_restrictions"}>
-                    <EditMapPage
-                        mode={"virtual_restrictions"}
-                    />
-                </Route>
-            }
-
-            <Route exact path={path + "/map_management/robot_coverage"}>
-                <RobotCoverageMapPage/>
-            </Route>
-
-
-
-            <Route exact path={path + "/connectivity"}>
-                <ConnectivityOptions/>
-            </Route>
-            <Route exact path={path + "/connectivity/auth"}>
-                <AuthSettingsPage/>
-            </Route>
-            <Route exact path={path + "/connectivity/mqtt"}>
-                <MQTTConnectivityPage/>
-            </Route>
-            <Route exact path={path + "/connectivity/networkadvertisement"}>
-                <NetworkAdvertisementSettingsPage/>
-            </Route>
-            <Route exact path={path + "/connectivity/ntp"}>
-                <NTPConnectivityPage/>
-            </Route>
-            {
-                wifiConfigurationCapabilitySupported &&
-                <Route exact path={path + "/connectivity/wifi"}>
-                    <WifiConnectivityPage/>
-                </Route>
-            }
-
-
-            <Route exact path={path + "/robot"}>
-                <RobotOptions/>
-            </Route>
-            <Route exact path={path + "/robot/misc"}>
-                <MiscRobotOptions/>
-            </Route>
-            <Route exact path={path + "/robot/quirks"}>
-                <Quirks/>
-            </Route>
-
+        <Routes>
+            <Route path={"map_management/*"} element={<MapManagementOptionsRouter />} />
+            <Route path={"connectivity/*"} element={<ConnectivityOptionsRouter />} />
+            <Route path={"robot/*"} element={<RobotOptionsRouter />} />
 
-            <Route exact path={path + "/valetudo"}>
-                <ValetudoOptions/>
-            </Route>
+            <Route path={"valetudo"} element={<ValetudoOptions />} />
 
-            <Route path="*">
-                <h3>Unknown route</h3>
-            </Route>
-        </Switch>
+            <Route path="*" element={<Navigate to="/" />} />
+        </Routes>
     );
 };
 
diff --git a/frontend/src/options/RobotOptionsRouter.tsx b/frontend/src/options/RobotOptionsRouter.tsx
new file mode 100644
index 00000000000..0a1dcbd57e7
--- /dev/null
+++ b/frontend/src/options/RobotOptionsRouter.tsx
@@ -0,0 +1,20 @@
+import {Route} from "react-router";
+import {Navigate, Routes} from "react-router-dom";
+import React from "react";
+import RobotOptions from "../robot/RobotOptions";
+import MiscRobotOptions from "../robot/capabilities/MiscRobotOptions";
+import Quirks from "../robot/capabilities/Quirks";
+
+const OptionsRouter = (): React.ReactElement => {
+    return (
+        <Routes>
+            <Route path={""} element={<RobotOptions />} />
+            <Route path={"misc"} element={<MiscRobotOptions />} />
+            <Route path={"quirks"} element={<Quirks />} />
+
+            <Route path="*" element={<Navigate to="/" />} />
+        </Routes>
+    );
+};
+
+export default OptionsRouter;
diff --git a/frontend/src/robot/RobotRouter.tsx b/frontend/src/robot/RobotRouter.tsx
index 99227788c1e..8bb04786b61 100644
--- a/frontend/src/robot/RobotRouter.tsx
+++ b/frontend/src/robot/RobotRouter.tsx
@@ -1,28 +1,19 @@
-import {Route, Switch} from "react-router";
-import {useRouteMatch} from "react-router-dom";
+import {Route} from "react-router";
+import {Navigate, Routes} from "react-router-dom";
 import Consumables from "./Consumables";
 import ManualControl from "./ManualControl";
 import TotalStatistics from "./TotalStatistics";
 import React from "react";
 
 const RobotRouter = (): React.ReactElement => {
-    const {path} = useRouteMatch();
-
     return (
-        <Switch>
-            <Route exact path={path + "/consumables"}>
-                <Consumables/>
-            </Route>
-            <Route exact path={path + "/manual_control"}>
-                <ManualControl/>
-            </Route>
-            <Route exact path={path + "/total_statistics"}>
-                <TotalStatistics/>
-            </Route>
-            <Route path="*">
-                <h3>Unknown route</h3>
-            </Route>
-        </Switch>
+        <Routes>
+            <Route path={"consumables"} element={<Consumables/>}/>
+            <Route path={"manual_control"} element={<ManualControl/>}/>
+            <Route path={"total_statistics"} element={<TotalStatistics/>}/>
+
+            <Route path="*" element={<Navigate to="/" />} />
+        </Routes>
     );
 };
 
diff --git a/frontend/src/valetudo/ValetudoRouter.tsx b/frontend/src/valetudo/ValetudoRouter.tsx
index e9d8e8826f4..848d408adc8 100644
--- a/frontend/src/valetudo/ValetudoRouter.tsx
+++ b/frontend/src/valetudo/ValetudoRouter.tsx
@@ -1,5 +1,5 @@
-import {Route, Switch} from "react-router";
-import {useRouteMatch} from "react-router-dom";
+import {Route, } from "react-router";
+import {Navigate, Routes} from "react-router-dom";
 import SystemInformation from "./SystemInformation";
 import Timers from "./timers";
 import Log from "./Log";
@@ -9,32 +9,17 @@ import Help from "./Help";
 import React from "react";
 
 const ValetudoRouter = (): React.ReactElement => {
-    const {path} = useRouteMatch();
-
     return (
-        <Switch>
-            <Route exact path={path + "/about"}>
-                <About/>
-            </Route>
-            <Route exact path={path + "/system_information"}>
-                <SystemInformation/>
-            </Route>
-            <Route exact path={path + "/log"}>
-                <Log/>
-            </Route>
-            <Route exact path={path + "/timers"}>
-                <Timers/>
-            </Route>
-            <Route exact path={path + "/updater"}>
-                <Updater/>
-            </Route>
-            <Route exact path={path + "/help"}>
-                <Help/>
-            </Route>
-            <Route path="*">
-                <h3>Unknown route</h3>
-            </Route>
-        </Switch>
+        <Routes>
+            <Route path={"about"} element={<About/>}/>
+            <Route path={"system_information"} element={<SystemInformation/>}/>
+            <Route path={"log"} element={<Log/>}/>
+            <Route path={"timers"} element={<Timers/>}/>
+            <Route path={"updater"} element={<Updater/>}/>
+            <Route path={"help"} element={<Help/>}/>
+
+            <Route path="*" element={<Navigate to="/" />} />
+        </Routes>
     );
 };
 
diff --git a/package-lock.json b/package-lock.json
index 7dd1572565a..4cad3d13f42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -120,7 +120,7 @@
         "react-div-100vh": "0.7.0",
         "react-dom": "18.3.1",
         "react-markdown": "9.0.1",
-        "react-router-dom": "5.3.3",
+        "react-router-dom": "6.27.0",
         "react-scripts": "5.0.1",
         "reconnecting-eventsource": "1.6.2",
         "rehype-raw": "7.0.0",
@@ -134,7 +134,6 @@
         "@babel/plugin-proposal-private-property-in-object": "7.21.11",
         "@types/react": "18.3.8",
         "@types/react-dom": "18.3.0",
-        "@types/react-router-dom": "5.3.3",
         "@types/uuid": "10.0.0",
         "cra-build-watch": "git+https://npm@github.com/Hypfer/cra-build-watch.git#5.0.0",
         "tsutils": "3.21.0"
@@ -4168,6 +4167,14 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4711,12 +4718,6 @@
         "@types/unist": "*"
       }
     },
-    "node_modules/@types/history": {
-      "version": "4.7.11",
-      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
-      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
-      "dev": true
-    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -4878,27 +4879,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-router": {
-      "version": "5.1.20",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
-      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
-      "dev": true,
-      "dependencies": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
-      "dev": true,
-      "dependencies": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*",
-        "@types/react-router": "*"
-      }
-    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.11",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
@@ -11288,19 +11268,6 @@
       "resolved": "https://registry.npmjs.org/help-me/-/help-me-5.0.0.tgz",
       "integrity": "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg=="
     },
-    "node_modules/history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -14808,20 +14775,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
-      "dependencies": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
     "node_modules/mini-css-extract-plugin": {
       "version": "2.7.6",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
@@ -17706,60 +17659,35 @@
       }
     },
     "node_modules/react-router": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.3.tgz",
-      "integrity": "sha512-mzQGUvS3bM84TnbtMYR8ZjKnuPJ71IjSzR+DE6UkUqvN4czWIqEs17yLL8xkAycv4ev0AiN+IGrWu88vJs/p2w==",
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
       "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "@remix-run/router": "1.20.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-Ov0tGPMBgqmbu5CDmN++tv2HQ9HlWDuWIIqn4b88gjlAN5IHI+4ZUZRcpz9Hl0azFIwihbLDYw1OiHGRo7ZIng==",
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
       "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.3.3",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
-        "react": ">=15"
-      }
-    },
-    "node_modules/react-router/node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-    },
-    "node_modules/react-router/node_modules/path-to-regexp": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
-      "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
-      "dependencies": {
-        "isarray": "0.0.1"
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
       }
     },
-    "node_modules/react-router/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -18468,11 +18396,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
     "node_modules/resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -20484,16 +20407,6 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
-    "node_modules/tiny-invariant": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
-      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
-    },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -21182,11 +21095,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -24865,6 +24773,11 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
     },
+    "@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -25251,12 +25164,6 @@
         "@types/unist": "*"
       }
     },
-    "@types/history": {
-      "version": "4.7.11",
-      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
-      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
-      "dev": true
-    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -25418,27 +25325,6 @@
         "@types/react": "*"
       }
     },
-    "@types/react-router": {
-      "version": "5.1.20",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
-      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
-      "dev": true,
-      "requires": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*"
-      }
-    },
-    "@types/react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
-      "dev": true,
-      "requires": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*",
-        "@types/react-router": "*"
-      }
-    },
     "@types/react-transition-group": {
       "version": "4.4.11",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
@@ -30006,19 +29892,6 @@
       "resolved": "https://registry.npmjs.org/help-me/-/help-me-5.0.0.tgz",
       "integrity": "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg=="
     },
-    "history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -32479,15 +32352,6 @@
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
       "dev": true
     },
-    "mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "requires": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      }
-    },
     "mini-css-extract-plugin": {
       "version": "2.7.6",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
@@ -34391,54 +34255,20 @@
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
     "react-router": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.3.tgz",
-      "integrity": "sha512-mzQGUvS3bM84TnbtMYR8ZjKnuPJ71IjSzR+DE6UkUqvN4czWIqEs17yLL8xkAycv4ev0AiN+IGrWu88vJs/p2w==",
-      "requires": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-        },
-        "path-to-regexp": {
-          "version": "1.9.0",
-          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
-          "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
-          "requires": {
-            "isarray": "0.0.1"
-          }
-        },
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        }
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "requires": {
+        "@remix-run/router": "1.20.0"
       }
     },
     "react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-Ov0tGPMBgqmbu5CDmN++tv2HQ9HlWDuWIIqn4b88gjlAN5IHI+4ZUZRcpz9Hl0azFIwihbLDYw1OiHGRo7ZIng==",
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
       "requires": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.3.3",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
       }
     },
     "react-scripts": {
@@ -34977,11 +34807,6 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
     },
-    "resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
     "resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -36481,16 +36306,6 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
-    "tiny-invariant": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
-      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
-    },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -37026,7 +36841,6 @@
         "@tanstack/react-query-devtools": "5.56.2",
         "@types/react": "18.3.8",
         "@types/react-dom": "18.3.0",
-        "@types/react-router-dom": "5.3.3",
         "@types/uuid": "10.0.0",
         "axios": "1.6.2",
         "cra-build-watch": "git+https://npm@github.com/Hypfer/cra-build-watch.git#5.0.0",
@@ -37036,7 +36850,7 @@
         "react-div-100vh": "0.7.0",
         "react-dom": "18.3.1",
         "react-markdown": "9.0.1",
-        "react-router-dom": "5.3.3",
+        "react-router-dom": "6.27.0",
         "react-scripts": "5.0.1",
         "reconnecting-eventsource": "1.6.2",
         "rehype-raw": "7.0.0",
@@ -37088,11 +36902,6 @@
       "resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",
       "integrity": "sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ=="
     },
-    "value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index 0ebea5d6a34..f4b899f7849 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "upx": "node ./util/upx_compress_valetudo.js",
     "build_openapi_schema": "node util/build_openapi_schema.mjs",
     "build_release_manifest": "node util/build_release_manifest.js",
-    "check_dependencies_for_update": "npx check-outdated --ignore-pre-releases --ignore-packages react-router-dom,typescript,axios,@types/node,date-fns",
+    "check_dependencies_for_update": "npx check-outdated --ignore-pre-releases --ignore-packages typescript,axios,@types/node,date-fns",
     "generate_changelog": "npx auto-changelog --commit-limit false --tag-pattern .+ --handlebars-setup ./util/res/auto_changelog_handlebars_helpers.js --template ./util/res/auto_changelog_template.hbs --output ./build/changelog.md",
     "generate_nightly_changelog": "npx auto-changelog --commit-limit false --tag-pattern .+ --unreleased-only --handlebars-setup ./util/res/auto_changelog_handlebars_helpers.js --template ./util/res/auto_changelog_template.hbs --output ./build/changelog_nightly.md",
     "generate_eslintrc_flavors": "node util/generate_eslintrc_flavors.js"