Upgrade vite and react-router (#778)

| Package                           | From | To       |
|----------------------------------|-----------|---------|
react-router                       | ( new ) | 7.8.2 |
react-router-dom             | 6.22.3 | ( del ) |
@vitejs/plugin-react-swc | 3.10.2 | 4.0.1 |
vite                                      | 6.3.5   | 7.1.4 |

Author: IDisposable

ui/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "kvm-ui",
   "private": true,
-  "version": "2025.09.03.1500",
+  "version": "2025.09.03.2100",
   "type": "module",
   "engines": {
     "node": "22.15.0"
@@ -41,7 +41,7 @@
     "react-dom": "^19.1.1",
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",
-    "react-router-dom": "^6.22.3",
+    "react-router": "^7.8.2",
     "react-simple-keyboard": "^3.8.119",
     "react-use-websocket": "^4.13.0",
     "react-xtermjs": "^1.0.10",
@@ -65,7 +65,7 @@
     "@types/validator": "^13.15.3",
     "@typescript-eslint/eslint-plugin": "^8.42.0",
     "@typescript-eslint/parser": "^8.42.0",
-    "@vitejs/plugin-react-swc": "^3.10.2",
+    "@vitejs/plugin-react-swc": "^4.0.1",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
@@ -79,7 +79,7 @@
     "prettier-plugin-tailwindcss": "^0.6.14",
     "tailwindcss": "^4.1.12",
     "typescript": "^5.9.2",
-    "vite": "^6.3.5",
+    "vite": "^7.1.4",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }

ui/package.json

@@ -1,4 +1,4 @@
-import { useLocation, useNavigation, useSearchParams } from "react-router-dom";
+import { useLocation, useNavigation, useSearchParams } from "react-router";
 
 import { Button, LinkButton } from "@components/Button";
 import { GoogleIcon } from "@components/Icons";

ui/src/components/AuthLayout.tsx

@@ -1,5 +1,6 @@
 import React, { JSX } from "react";
-import { FetcherWithComponents, Link, LinkProps, useNavigation } from "react-router-dom";
+import { Link, useNavigation } from "react-router";
+import type { FetcherWithComponents, LinkProps } from "react-router";
 
 import ExtLink from "@/components/ExtLink";
 import LoadingSpinner from "@/components/LoadingSpinner";

ui/src/components/Button.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import clsx from "clsx";
-import { FetcherWithComponents, useNavigation } from "react-router-dom";
+import { useNavigation } from "react-router";
+import type { FetcherWithComponents } from "react-router";
 
 export default function Fieldset({
   children,

ui/src/components/Fieldset.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { ArrowLeftEndOnRectangleIcon, ChevronDownIcon } from "@heroicons/react/16/solid";
 import { Button, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import { LuMonitorSmartphone } from "react-icons/lu";

ui/src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { MdConnectWithoutContact } from "react-icons/md";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { LuEllipsisVertical } from "react-icons/lu";
 
 import Card from "@components/Card";

ui/src/components/KvmCard.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import React from "react";
 
 import Container from "@/components/Container";

ui/src/components/SimpleNavbar.tsx

@@ -6,7 +6,7 @@ import {
   LuRadioReceiver,
 } from "react-icons/lu";
 import { useClose } from "@headlessui/react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 import { Button } from "@components/Button";
 import Card, { GridCard } from "@components/Card";

ui/src/components/popovers/MountPopover.tsx

@@ -1,4 +1,5 @@
-import { useNavigate, useParams, NavigateOptions } from "react-router-dom";
+import { useNavigate, useParams } from "react-router";
+import type { NavigateOptions } from "react-router";
 import { useCallback, useMemo } from "react";
 
 import { isOnDevice } from "../main";