fix(ui): upgrade react-router 7 -> 8 (JEF-623)

ui/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "react": "^19.2.7",
     "react-dom": "^19.2.8",
-    "react-router-dom": "^7.18.1"
+    "react-router": "^8.3.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",

ui/src/App.tsx

@@ -7,7 +7,7 @@ import {
   useNavigate,
   useParams,
   useSearchParams,
-} from "react-router-dom";
+} from "react-router";
 import TraceList from "./components/TraceList";
 import TraceWaterfall from "./components/TraceWaterfall";
 import LogView from "./components/LogView";

ui/src/components/Alerts.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import {
   listAlerts,
   listAlertEvents,

ui/src/components/LogView.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useEffect, useState } from "react";
-import { Link, useSearchParams } from "react-router-dom";
+import { Link, useSearchParams } from "react-router";
 import { listLogs, type LogRow } from "../api";
 import { firstRunHint } from "../empty";
 import { traceHref } from "../links";

ui/src/components/MetricChart.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router";
 import {
   getMetricExemplars,
   getMetricFacet,

ui/src/components/MetricList.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import {
   getMetricFacet,
   getMetricHistFacet,

ui/src/components/ServiceMap.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { getServiceMap, type ServiceMapData } from "../api";
 import { rowKeyActivate } from "../a11y";
 import { firstRunHint } from "../empty";

ui/src/components/Services.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { listServices, type ServiceRed } from "../api";
 import { useControls, rangeParams } from "../timerange";
 import { useSort } from "../sort";

ui/src/components/TraceList.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Link, useSearchParams } from "react-router-dom";
+import { Link, useSearchParams } from "react-router";
 import { listTraces, type TraceSummary } from "../api";
 import { useControls, rangeParams } from "../timerange";
 import { useSort } from "../sort";

ui/src/components/TraceWaterfall.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Link, useSearchParams } from "react-router-dom";
+import { Link, useSearchParams } from "react-router";
 import { getTrace, type SpanRow } from "../api";
 import { rowKeyActivate } from "../a11y";
 import { logsHref } from "../links";

ui/src/main.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router";
 import App from "./App";
 import { TimeRangeProvider } from "./timerange";
 import "./styles.css";

ui/src/routes.a11y.test.tsx

@@ -20,7 +20,7 @@
 // JEF-443's Alerts row rework).
 import { describe, expect, it, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import type { ReactElement } from "react";
 import { axe } from "vitest-axe";
 import App from "./App";

ui/src/timerange.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 
 // Relative ranges. `ms: 0` means unbounded ("all").
 export const RANGES: { key: string; label: string; ms: number }[] = [