chore(deps): clear npm audit highs — react-router v8 + transitive bumps

client/package.json

@@ -27,7 +27,7 @@
     "mediasoup-client": "^3.20.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "react-router-dom": "^7.18.1",
+    "react-router": "^8.3.0",
     "socket.io-client": "^4.8.3",
     "three": "^0.185.1"
   },

client/src/App.tsx

@@ -1,4 +1,4 @@
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router';
 import LandingPage from './pages/LandingPage';
 import LobbyPage from './pages/LobbyPage';
 import RoomPage from './pages/RoomPage';

client/src/components/ProtectedRoute.tsx

@@ -1,4 +1,4 @@
-import { Navigate, useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router';
 import { Box, CircularProgress } from '@mui/material';
 import { useAuth } from '../context/AuthContext';
 import type { ReactNode } from 'react';

client/src/components/RoomGuard.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { MemoryRouter, Routes, Route } from 'react-router';
 import RoomGuard from './RoomGuard.jsx';
 import api from '../api/axios';
 

client/src/components/RoomGuard.tsx

@@ -1,5 +1,5 @@
 import { createContext, useEffect, useState, type ReactNode } from 'react';
-import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { useParams, useNavigate, useLocation } from 'react-router';
 import { Box, CircularProgress } from '@mui/material';
 import api from '../api/axios';
 import CheckMeetingCode from '../pages/CheckMeetingCode';

client/src/components/UpcomingMeetings.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import {
   Box, Stack, Typography, Button, IconButton, Menu, MenuItem, ListItemIcon,
   CircularProgress, Snackbar, Dialog, DialogTitle, DialogContent, DialogActions,

client/src/main.tsx

@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from './theme/theme';

client/src/pages/CheckMeetingCode.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { Box, Button, Link, Paper, Stack, Typography } from '@mui/material';
 import { Security as SecurityIcon } from '@mui/icons-material';
 import BrandMark from '../components/BrandMark';

client/src/pages/LandingPage.tsx

@@ -1,5 +1,5 @@
 import { useState, type FormEvent } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { motion } from "framer-motion";
 import {
   Avatar,

client/src/pages/LinkDiscordPage.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { ThemeProvider } from '@mui/material/styles';
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 import theme from '../theme/theme';

client/src/pages/LinkDiscordPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { Box, Button, CircularProgress, Paper, Stack, Typography } from '@mui/material';
 import {
   CheckCircle as CheckCircleIcon,

client/src/pages/LobbyPage.test.tsx

@@ -1,13 +1,13 @@
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router';
 import { ThemeProvider } from '@mui/material/styles';
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import theme from '../theme/theme';
 
 // Capture router navigation without a real history. useParams stays real so the
 // page still reads :roomId from the route.
 const navigateMock = vi.fn();
-vi.mock('react-router-dom', async (importOriginal) => ({
+vi.mock('react-router', async (importOriginal) => ({
   ...(await importOriginal()),
   useNavigate: () => navigateMock,
 }));

client/src/pages/LobbyPage.tsx

@@ -1,5 +1,5 @@
 import { useContext, useEffect, useRef, type MouseEvent, type ElementType } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import { motion } from 'framer-motion';
 import {
   Avatar, Box, Button, FormControl,

client/src/pages/RoomPage.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useContext, useEffect, useRef, useState, type ComponentProps, type FormEvent } from 'react';
-import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { useParams, useNavigate, useLocation } from 'react-router';
 import {
   Alert, Avatar, AvatarGroup, Box, Button, Chip, Dialog, DialogActions,
   DialogContent, DialogTitle, IconButton, Popover,