Migrated to react router v7

frontend/package-lock.json

@@ -20,14 +20,13 @@
         "@types/node": "^20.0.0",
         "@types/react": "^19.1.8",
         "@types/react-dom": "^19.1.6",
-        "@types/react-router-dom": "^5.3.3",
         "axios": "^1.10.0",
         "bootstrap": "^5.3.7",
         "browser-image-compression": "^2.0.2",
         "react": "^19.1.0",
         "react-datepicker": "^9.1.0",
         "react-dom": "^19.1.0",
-        "react-router-dom": "^6.30.1",
+        "react-router": "^7.12.0",
         "socket.io-client": "^4.8.1",
         "stripe": "^18.4.0",
         "typescript": "^4.9.5"
@@ -1271,15 +1270,6 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
-    "node_modules/@remix-run/router": {
-      "version": "1.23.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
-      "integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -1860,12 +1850,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "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==",
-      "license": "MIT"
-    },
     "node_modules/@types/node": {
       "version": "20.19.30",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.30.tgz",
@@ -1893,27 +1877,6 @@
         "@types/react": "^19.2.0"
       }
     },
-    "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==",
-      "license": "MIT",
-      "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==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*",
-        "@types/react-router": "*"
-      }
-    },
     "node_modules/@types/statuses": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/statuses/-/statuses-2.0.6.tgz",
@@ -2384,7 +2347,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
       "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -3692,35 +3654,25 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.30.3",
+      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
-      "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
+      "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.23.2"
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8"
+        "react": ">=18",
-      }
+        "react-dom": ">=18"
-    },
-    "node_modules/react-router-dom": {
-      "version": "6.30.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
-      "integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
-      "license": "MIT",
-      "dependencies": {
-        "@remix-run/router": "1.23.2",
-        "react-router": "6.30.3"
       },
-      "engines": {
+      "peerDependenciesMeta": {
-        "node": ">=14.0.0"
+        "react-dom": {
-      },
+          "optional": true
-      "peerDependencies": {
+        }
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
       }
     },
     "node_modules/redent": {
@@ -3837,6 +3789,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/side-channel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",

frontend/package.json

@@ -16,14 +16,13 @@
     "@types/node": "^20.0.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@types/react-router-dom": "^5.3.3",
     "axios": "^1.10.0",
     "bootstrap": "^5.3.7",
     "browser-image-compression": "^2.0.2",
     "react": "^19.1.0",
     "react-datepicker": "^9.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^6.30.1",
+    "react-router": "^7.12.0",
     "socket.io-client": "^4.8.1",
     "stripe": "^18.4.0",
     "typescript": "^4.9.5"

frontend/src/App.tsx

@@ -1,13 +1,10 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { createBrowserRouter, RouterProvider } from 'react-router';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
 import { SocketProvider } from './contexts/SocketContext';
-import Navbar from './components/Navbar';
+import RootLayout from './components/RootLayout';
-import Footer from './components/Footer';
+import ProtectedLayout from './components/ProtectedLayout';
-import AuthModal from './components/AuthModal';
 import AlphaGate from './components/AlphaGate';
-import FeedbackButton from './components/FeedbackButton';
-import { TwoFactorVerifyModal } from './components/TwoFactor';
 import Home from './pages/Home';
 import GoogleCallback from './pages/GoogleCallback';
 import VerifyEmail from './pages/VerifyEmail';
@@ -30,50 +27,56 @@ import EarningsDashboard from './pages/EarningsDashboard';
 import CompletePayment from './pages/CompletePayment';
 import FAQ from './pages/FAQ';
 import NotFound from './pages/NotFound';
-import PrivateRoute from './components/PrivateRoute';
 import axios from 'axios';
 import './App.css';
 
 const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5001';
 
+const router = createBrowserRouter([
+  {
+    element: <RootLayout />,
+    children: [
+      // Public routes
+      { path: '/', element: <Home /> },
+      { path: '/auth/google/callback', element: <GoogleCallback /> },
+      { path: '/verify-email', element: <VerifyEmail /> },
+      { path: '/reset-password', element: <ResetPassword /> },
+      { path: '/items', element: <ItemList /> },
+      { path: '/items/:id', element: <ItemDetail /> },
+      { path: '/users/:id', element: <PublicProfile /> },
+      { path: '/forum', element: <ForumPosts /> },
+      { path: '/forum/:id', element: <ForumPostDetail /> },
+      { path: '/faq', element: <FAQ /> },
+
+      // Protected routes group
+      {
+        element: <ProtectedLayout />,
+        children: [
+          { path: '/items/:id/edit', element: <EditItem /> },
+          { path: '/items/:id/rent', element: <RentItem /> },
+          { path: '/create-item', element: <CreateItem /> },
+          { path: '/renting', element: <Renting /> },
+          { path: '/complete-payment/:rentalId', element: <CompletePayment /> },
+          { path: '/owning', element: <Owning /> },
+          { path: '/profile', element: <Profile /> },
+          { path: '/messages', element: <Messages /> },
+          { path: '/forum/create', element: <CreateForumPost /> },
+          { path: '/forum/:id/edit', element: <CreateForumPost /> },
+          { path: '/my-posts', element: <MyPosts /> },
+          { path: '/earnings', element: <EarningsDashboard /> },
+        ],
+      },
+
+      // Catch-all route
+      { path: '*', element: <NotFound /> },
+    ],
+  },
+]);
+
 const AppContent: React.FC = () => {
-  const { showAuthModal, authModalMode, closeAuthModal, user } = useAuth();
   const [hasAlphaAccess, setHasAlphaAccess] = useState<boolean | null>(null);
   const [checkingAccess, setCheckingAccess] = useState(true);
 
-  // Step-up authentication state
-  const [showStepUpModal, setShowStepUpModal] = useState(false);
-  const [stepUpAction, setStepUpAction] = useState<string | undefined>();
-  const [stepUpMethods, setStepUpMethods] = useState<("totp" | "email" | "recovery")[]>([]);
-
-  // Listen for step-up authentication required events
-  useEffect(() => {
-    const handleStepUpRequired = (event: CustomEvent) => {
-      const { action, methods } = event.detail;
-      setStepUpAction(action);
-      setStepUpMethods(methods || ["totp", "email", "recovery"]);
-      setShowStepUpModal(true);
-    };
-
-    window.addEventListener("stepUpRequired", handleStepUpRequired as EventListener);
-
-    return () => {
-      window.removeEventListener("stepUpRequired", handleStepUpRequired as EventListener);
-    };
-  }, []);
-
-  const handleStepUpSuccess = useCallback(() => {
-    setShowStepUpModal(false);
-    setStepUpAction(undefined);
-    // Dispatch event so pending actions can auto-retry
-    window.dispatchEvent(new CustomEvent("stepUpSuccess"));
-  }, []);
-
-  const handleStepUpClose = useCallback(() => {
-    setShowStepUpModal(false);
-    setStepUpAction(undefined);
-  }, []);
-
   useEffect(() => {
     const checkAlphaAccess = async () => {
       // Bypass alpha access check if feature is disabled
@@ -115,145 +118,7 @@ const AppContent: React.FC = () => {
     return <AlphaGate />;
   }
 
-  return (
+  return <RouterProvider router={router} />;
-    <>
-      <Router>
-        <div className="d-flex flex-column min-vh-100">
-          <Navbar />
-          <main className="flex-grow-1">
-            <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/auth/google/callback" element={<GoogleCallback />} />
-          <Route path="/verify-email" element={<VerifyEmail />} />
-          <Route path="/reset-password" element={<ResetPassword />} />
-          <Route path="/items" element={<ItemList />} />
-          <Route path="/items/:id" element={<ItemDetail />} />
-          <Route path="/users/:id" element={<PublicProfile />} />
-          <Route
-            path="/items/:id/edit"
-            element={
-              <PrivateRoute>
-                <EditItem />
-              </PrivateRoute>
-            }
-          />
-          <Route
-            path="/items/:id/rent"
-            element={
-              <PrivateRoute>
-                <RentItem />
-              </PrivateRoute>
-            }
-          />
-          <Route
-            path="/create-item"
-            element={
-              <PrivateRoute>
-                <CreateItem />
-              </PrivateRoute>
-            }
-          />
-          <Route
-            path="/renting"
-            element={
-              <PrivateRoute>
-                <Renting />
-              </PrivateRoute>
-            }
-          />
-          <Route
-            path="/complete-payment/:rentalId"
-            element={
-              <PrivateRoute>
-                <CompletePayment />
-              </PrivateRoute>
-            }
-          />
-          <Route
-            path="/owning"
-            element={
-              <PrivateRoute>
-                <Owning />
-              </PrivateRoute>
-            }
-          />
-          <Route
-            path="/profile"
-            element={
-              <PrivateRoute>
-                <Profile />
-              </PrivateRoute>
-            }
-          />
-          <Route
-            path="/messages"
-            element={
-              <PrivateRoute>
-                <Messages />
-              </PrivateRoute>
-            }
-          />
-          <Route path="/forum" element={<ForumPosts />} />
-          <Route path="/forum/:id" element={<ForumPostDetail />} />
-          <Route
-            path="/forum/create"
-            element={
-              <PrivateRoute>
-                <CreateForumPost />
-              </PrivateRoute>
-            }
-          />
-          <Route
-            path="/forum/:id/edit"
-            element={
-              <PrivateRoute>
-                <CreateForumPost />
-              </PrivateRoute>
-            }
-          />
-          <Route
-            path="/my-posts"
-            element={
-              <PrivateRoute>
-                <MyPosts />
-              </PrivateRoute>
-            }
-          />
-          <Route
-            path="/earnings"
-            element={
-              <PrivateRoute>
-                <EarningsDashboard />
-              </PrivateRoute>
-            }
-          />
-          <Route path="/faq" element={<FAQ />} />
-          <Route path="*" element={<NotFound />} />
-            </Routes>
-          </main>
-          <Footer />
-        </div>
-      </Router>
-
-      <AuthModal
-        show={showAuthModal}
-        onHide={closeAuthModal}
-        initialMode={authModalMode}
-      />
-
-      {/* Show feedback button for authenticated users */}
-      {user && <FeedbackButton />}
-
-      {/* Global Step-Up Authentication Modal */}
-      <TwoFactorVerifyModal
-        show={showStepUpModal}
-        onHide={handleStepUpClose}
-        onSuccess={handleStepUpSuccess}
-        action={stepUpAction}
-        methods={stepUpMethods}
-      />
-    </>
-  );
 };
 
 const AppWithSocket: React.FC = () => {
@@ -274,4 +139,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

frontend/src/__tests__/components/ItemCard.test.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import { vi, type MockedFunction } from 'vitest';
 import ItemCard from '../../components/ItemCard';
 import { Item } from '../../types';

frontend/src/__tests__/components/Navbar.test.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import { vi, type Mock } from 'vitest';
 import Navbar from '../../components/Navbar';
 import { rentalAPI, messageAPI } from '../../services/api';
@@ -45,8 +45,8 @@ vi.mock('../../contexts/AuthContext', () => ({
 
 // Mock useNavigate
 const mockNavigate = vi.fn();
-vi.mock('react-router-dom', async () => {
+vi.mock('react-router', async () => {
-  const actual = await vi.importActual('react-router-dom');
+  const actual = await vi.importActual('react-router');
   return {
     ...actual,
     useNavigate: () => mockNavigate,

frontend/src/components/Footer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 const Footer: React.FC = () => {
   return (

frontend/src/components/ForumPostListItem.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { ForumPost } from "../types";
 import CategoryBadge from "./CategoryBadge";
 import PostStatusBadge from "./PostStatusBadge";

frontend/src/components/ItemCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Item } from '../types';
 import { getImageUrl } from '../services/uploadService';
 

frontend/src/components/ItemReviews.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { Rental } from "../types";
 import { itemAPI } from "../services/api";
 import Avatar from "./Avatar";

frontend/src/components/Navbar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
-import { Link, useNavigate, useLocation } from "react-router-dom";
+import { Link, useNavigate, useLocation } from "react-router";
 import { useAuth } from "../contexts/AuthContext";
 import { useSocket } from "../contexts/SocketContext";
 import { rentalAPI, messageAPI } from "../services/api";

frontend/src/components/PricingForm.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 interface PricingFormProps {
   pricePerHour: number | string;

frontend/src/components/ProtectedLayout.tsx

@@ -1,11 +1,8 @@
 import React, { useEffect } from "react";
+import { Outlet } from "react-router";
 import { useAuth } from "../contexts/AuthContext";
 
-interface PrivateRouteProps {
+const ProtectedLayout: React.FC = () => {
-  children: React.ReactNode;
-}
-
-const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
   const { user, loading, openAuthModal } = useAuth();
 
   useEffect(() => {
@@ -41,7 +38,7 @@ const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
     );
   }
 
-  return <>{children}</>;
+  return <Outlet />;
 };
 
-export default PrivateRoute;
+export default ProtectedLayout;

frontend/src/components/RootLayout.tsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Outlet } from "react-router";
+import { useAuth } from "../contexts/AuthContext";
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+import AuthModal from "./AuthModal";
+import FeedbackButton from "./FeedbackButton";
+import { TwoFactorVerifyModal } from "./TwoFactor";
+
+const RootLayout: React.FC = () => {
+  const { showAuthModal, authModalMode, closeAuthModal, user } = useAuth();
+
+  // Step-up authentication state
+  const [showStepUpModal, setShowStepUpModal] = useState(false);
+  const [stepUpAction, setStepUpAction] = useState<string | undefined>();
+  const [stepUpMethods, setStepUpMethods] = useState<("totp" | "email" | "recovery")[]>([]);
+
+  // Listen for step-up authentication required events
+  useEffect(() => {
+    const handleStepUpRequired = (event: CustomEvent) => {
+      const { action, methods } = event.detail;
+      setStepUpAction(action);
+      setStepUpMethods(methods || ["totp", "email", "recovery"]);
+      setShowStepUpModal(true);
+    };
+
+    window.addEventListener("stepUpRequired", handleStepUpRequired as EventListener);
+
+    return () => {
+      window.removeEventListener("stepUpRequired", handleStepUpRequired as EventListener);
+    };
+  }, []);
+
+  const handleStepUpSuccess = useCallback(() => {
+    setShowStepUpModal(false);
+    setStepUpAction(undefined);
+    // Dispatch event so pending actions can auto-retry
+    window.dispatchEvent(new CustomEvent("stepUpSuccess"));
+  }, []);
+
+  const handleStepUpClose = useCallback(() => {
+    setShowStepUpModal(false);
+    setStepUpAction(undefined);
+  }, []);
+
+  return (
+    <>
+      <div className="d-flex flex-column min-vh-100">
+        <Navbar />
+        <main className="flex-grow-1">
+          <Outlet />
+        </main>
+        <Footer />
+      </div>
+
+      <AuthModal
+        show={showAuthModal}
+        onHide={closeAuthModal}
+        initialMode={authModalMode}
+      />
+
+      {/* Show feedback button for authenticated users */}
+      {user && <FeedbackButton />}
+
+      {/* Global Step-Up Authentication Modal */}
+      <TwoFactorVerifyModal
+        show={showStepUpModal}
+        onHide={handleStepUpClose}
+        onSuccess={handleStepUpSuccess}
+        action={stepUpAction}
+        methods={stepUpMethods}
+      />
+    </>
+  );
+};
+
+export default RootLayout;

frontend/src/pages/CompletePayment.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback, useRef } from "react";
-import { useParams, useNavigate, Link } from "react-router-dom";
+import { useParams, useNavigate, Link } from "react-router";
 import { loadStripe } from "@stripe/stripe-js";
 import { rentalAPI } from "../services/api";
 import { useAuth } from "../contexts/AuthContext";

frontend/src/pages/CreateForumPost.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { useNavigate, Link, useParams } from "react-router-dom";
+import { useNavigate, Link, useParams } from "react-router";
 import { useAuth } from "../contexts/AuthContext";
 import { forumAPI, addressAPI } from "../services/api";
 import { uploadImagesWithVariants, getImageUrl } from "../services/uploadService";

frontend/src/pages/CreateItem.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useAuth } from "../contexts/AuthContext";
 import api, { addressAPI, userAPI, itemAPI } from "../services/api";
 import { uploadImagesWithVariants } from "../services/uploadService";

frontend/src/pages/EarningsDashboard.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { rentalAPI, userAPI, stripeAPI } from "../services/api";
 import { Rental, User } from "../types";
 import StripeConnectOnboarding from "../components/StripeConnectOnboarding";

frontend/src/pages/EditItem.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams, useNavigate } from "react-router";
 import { Item, Rental, Address } from "../types";
 import { useAuth } from "../contexts/AuthContext";
 import { itemAPI, rentalAPI, addressAPI, userAPI } from "../services/api";

frontend/src/pages/FAQ.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 interface FAQItem {
   question: string;

frontend/src/pages/ForumPostDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useParams, useNavigate, Link, useSearchParams } from 'react-router-dom';
+import { useParams, useNavigate, Link, useSearchParams } from 'react-router';
 import { useAuth } from '../contexts/AuthContext';
 import { forumAPI } from '../services/api';
 import { uploadImagesWithVariants, getImageUrl } from '../services/uploadService';

frontend/src/pages/ForumPosts.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router';
 import { useAuth } from '../contexts/AuthContext';
 import { forumAPI } from '../services/api';
 import { ForumPost } from '../types';

frontend/src/pages/GoogleCallback.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router';
 import { useAuth } from '../contexts/AuthContext';
 import { fetchCSRFToken } from '../services/api';
 

frontend/src/pages/Home.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useAuth } from "../contexts/AuthContext";
 import { itemAPI } from "../services/api";
 import { Item } from "../types";

frontend/src/pages/ItemDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams, useNavigate } from "react-router";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { Item, Rental } from "../types";

frontend/src/pages/ItemList.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import { useSearchParams, useNavigate } from "react-router-dom";
+import { useSearchParams, useNavigate } from "react-router";
 import { Item } from "../types";
 import { itemAPI } from "../services/api";
 import ItemCard from "../components/ItemCard";

frontend/src/pages/MyPosts.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { useAuth } from '../contexts/AuthContext';
 import { forumAPI } from '../services/api';
 import { ForumPost } from '../types';

frontend/src/pages/NotFound.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 const NotFound: React.FC = () => {
   return (

frontend/src/pages/Owning.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router";
 import { useAuth } from "../contexts/AuthContext";
 import api from "../services/api";
 import { Item, Rental, ConditionCheck } from "../types";

frontend/src/pages/Profile.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useAuth } from "../contexts/AuthContext";
 import { userAPI, itemAPI, rentalAPI, addressAPI, conditionCheckAPI } from "../services/api";
 import { User, Item, Rental, Address, ConditionCheck } from "../types";

frontend/src/pages/PublicProfile.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router';
 import { User, Item } from '../types';
 import { userAPI, itemAPI } from '../services/api';
 import { getImageUrl } from '../services/uploadService';

frontend/src/pages/RentItem.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { useParams, useNavigate, useSearchParams } from "react-router-dom";
+import { useParams, useNavigate, useSearchParams } from "react-router";
 import { Item } from "../types";
 import { useAuth } from "../contexts/AuthContext";
 import { itemAPI, rentalAPI } from "../services/api";

frontend/src/pages/Renting.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router";
 import { useAuth } from "../contexts/AuthContext";
 import { rentalAPI, conditionCheckAPI } from "../services/api";
 import { getImageUrl } from "../services/uploadService";

frontend/src/pages/ResetPassword.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { useNavigate, useSearchParams, Link } from 'react-router-dom';
+import { useNavigate, useSearchParams, Link } from 'react-router';
 import { useAuth } from '../contexts/AuthContext';
 import { authAPI } from '../services/api';
 import PasswordInput from '../components/PasswordInput';

frontend/src/pages/VerifyEmail.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from "react";
-import { useNavigate, useSearchParams, Link } from "react-router-dom";
+import { useNavigate, useSearchParams, Link } from "react-router";
 import { useAuth } from "../contexts/AuthContext";
 import { authAPI } from "../services/api";
 

frontend/src/services/api.ts

@@ -160,7 +160,7 @@ api.interceptors.response.use(
           isRefreshing = false;
           processQueue(refreshError as AxiosError);
 
-          // Refresh failed - let React Router handle redirects via PrivateRoute
+          // Refresh failed - let React Router handle redirects via ProtectedLayout
           return Promise.reject(refreshError);
         }
       }