Finish upgrading to react-router v7

See https://reactrouter.com/upgrading/v6

Signed-off-by: Antonin Bas <antonin.bas@broadcom.com>

client/web/antrea-ui/package.json

@@ -25,7 +25,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.2",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^7.0.1",
+    "react-router": "^7.0.1",
     "typescript": "^5.7.2",
     "vite": "^5.4.11",
     "vitest": "^2.1.5",

client/web/antrea-ui/src/App.test.tsx

@@ -17,7 +17,7 @@
 import React, { ReactElement, useContext } from 'react';
 import { act, render, screen, waitFor, RenderOptions } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { Provider } from 'react-redux';
 import App, { LoginWall, WaitForSettings } from './App';
 import { setupStore, AppStore, setToken, store } from './store';

client/web/antrea-ui/src/App.tsx

@@ -17,7 +17,7 @@
 import React, { useEffect, useState, useContext } from 'react';
 import logo from './logo.svg';
 import './App.css';
-import { Outlet, Link, useSearchParams } from "react-router-dom";
+import { Outlet, Link, useSearchParams } from "react-router";
 import NavTab from './components/nav';
 import Login from './components/login';
 import { useLogout } from './components/logout';

client/web/antrea-ui/src/components/nav.tsx

@@ -15,7 +15,7 @@
  */
 
 import { useState } from 'react';
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { CdsNavigation, CdsNavigationStart, CdsNavigationItem } from "@cds/react/navigation";
 import { CdsIcon } from '@cds/react/icon';
 import {

client/web/antrea-ui/src/index.tsx

@@ -16,17 +16,15 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { createBrowserRouter } from 'react-router';
+import { RouterProvider } from 'react-router/dom';
 import './index.css';
 import App from './App';
 import Summary from './routes/summary';
 import Traceflow from './routes/traceflow';
 import TraceflowResult from './routes/traceflowresult';
 import Settings from './routes/settings';
 import reportWebVitals from './reportWebVitals';
-import {
-  createBrowserRouter,
-  RouterProvider,
-} from "react-router-dom";
 
 const router = createBrowserRouter([
     {

client/web/antrea-ui/src/routes/settings.test.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import Settings from './settings';
 import { accountAPI } from '../api/account';
 import { APIError } from '../api/common';

client/web/antrea-ui/src/routes/traceflow.test.tsx

@@ -17,7 +17,7 @@
 import { useLayoutEffect, useRef} from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import Traceflow from './traceflow';
 import { traceflowAPI, TraceflowSpec, TraceflowStatus } from '../api/traceflow';
 
@@ -42,8 +42,8 @@ const mockedTraceflowAPI = vi.mocked(traceflowAPI, true);
 
 const mockNavigate = vi.fn();
 
-vi.mock("react-router-dom", async () => {
-  const actual = await vi.importActual("react-router-dom");
+vi.mock("react-router", async () => {
+  const actual = await vi.importActual("react-router");
   return {
     ...actual,
     useNavigate: () => mockNavigate,

client/web/antrea-ui/src/routes/traceflow.tsx

@@ -15,7 +15,7 @@
  */
 
 import { useState, useEffect, useRef} from 'react';
-import { useNavigate, Outlet } from "react-router-dom";
+import { useNavigate, Outlet } from "react-router";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { CdsAlertGroup, CdsAlert } from "@cds/react/alert";
 import { CdsButton } from '@cds/react/button';

client/web/antrea-ui/src/routes/traceflowresult.tsx

@@ -15,7 +15,7 @@
  */
 
 import { useEffect, useRef} from 'react';
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { TraceflowSpec, TraceflowStatus, TraceflowNodeResult, TraceflowObservation } from '../api/traceflow';
 // eslint-disable-next-line
 import * as d3 from 'd3';

client/web/antrea-ui/yarn.lock

@@ -3852,14 +3852,7 @@ react-refresh@^0.14.2:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
   integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
 
-react-router-dom@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.0.1.tgz#b1438100800313e1b4c48da0c5fdb498f81c7f96"
-  integrity sha512-duBzwAAiIabhFPZfDjcYpJ+f08TMbPMETgq254GWne2NW1ZwRHhZLj7tpSp8KGb7JvZzlLcjGUnqLxpZQVEPng==
-  dependencies:
-    react-router "7.0.1"
-
-react-router@7.0.1:
+react-router@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.0.1.tgz#a171e35a5c6463f76b23353c4ce57b53c8b7b1b9"
   integrity sha512-WVAhv9oWCNsja5AkK6KLpXJDSJCQizOIyOd4vvB/+eHGbYx5vkhcmcmwWjQ9yqkRClogi+xjEg9fNEOd5EX/tw==