diff --git a/package.json b/package.json
index 95ac5ce5a..99e3b844b 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,8 @@
     "react-i18next": "^15.1.0",
     "react-joyride": "^2.9.2",
     "react-redux": "^8.0.5",
-    "react-router-dom": "^6.26.2",
+    "react-router-dom": "5.3.x",
+    "react-router-dom-v5-compat": "^6.11.2",
     "rxjs": "^7.8.1",
     "semver": "^7.6.0",
     "showdown": "^2.1.0"
diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
index fda0024d8..1f5a6c078 100644
--- a/src/app/AppLayout/AppLayout.tsx
+++ b/src/app/AppLayout/AppLayout.tsx
@@ -81,7 +81,7 @@ import {
 import _ from 'lodash';
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { Link, matchPath, NavLink, useLocation, useNavigate } from 'react-router-dom';
+import { Link, matchPath, NavLink, useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { map } from 'rxjs/operators';
 import { LogoutIcon } from './LogoutIcon';
 import { ThemeToggle } from './ThemeToggle';
diff --git a/src/app/AppLayout/AuthModal.tsx b/src/app/AppLayout/AuthModal.tsx
index 6b32f05d4..22a8d4feb 100644
--- a/src/app/AppLayout/AuthModal.tsx
+++ b/src/app/AppLayout/AuthModal.tsx
@@ -18,7 +18,7 @@ import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { Modal, ModalVariant, Text } from '@patternfly/react-core';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { Observable, filter, first, map, mergeMap } from 'rxjs';
 import { CredentialAuthForm } from './CredentialAuthForm';
 
diff --git a/src/app/AppLayout/SslErrorModal.tsx b/src/app/AppLayout/SslErrorModal.tsx
index 7af75a21c..60444de44 100644
--- a/src/app/AppLayout/SslErrorModal.tsx
+++ b/src/app/AppLayout/SslErrorModal.tsx
@@ -16,7 +16,7 @@
 import { portalRoot } from '@app/utils/utils';
 import { Button, Modal, ModalVariant, Text } from '@patternfly/react-core';
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 
 export interface SslErrorModalProps {
   visible: boolean;
diff --git a/src/app/Archives/Archives.tsx b/src/app/Archives/Archives.tsx
index 81b64f838..46cbf2b51 100644
--- a/src/app/Archives/Archives.tsx
+++ b/src/app/Archives/Archives.tsx
@@ -31,7 +31,7 @@ import {
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { of } from 'rxjs';
 import { AllArchivedRecordingsTable } from './AllArchivedRecordingsTable';
 import { AllTargetsArchivedRecordingsTable } from './AllTargetsArchivedRecordingsTable';
diff --git a/src/app/BreadcrumbPage/BreadcrumbPage.tsx b/src/app/BreadcrumbPage/BreadcrumbPage.tsx
index 6f0d2430a..43cd5970b 100644
--- a/src/app/BreadcrumbPage/BreadcrumbPage.tsx
+++ b/src/app/BreadcrumbPage/BreadcrumbPage.tsx
@@ -23,7 +23,7 @@ import {
   StackItem,
 } from '@patternfly/react-core';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { BreadcrumbTrail } from './types';
 import { isItemFilled } from './utils';
 
diff --git a/src/app/CreateRecording/CustomRecordingForm.tsx b/src/app/CreateRecording/CustomRecordingForm.tsx
index 4d96da38a..f67b638c2 100644
--- a/src/app/CreateRecording/CustomRecordingForm.tsx
+++ b/src/app/CreateRecording/CustomRecordingForm.tsx
@@ -55,7 +55,7 @@ import {
 } from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { forkJoin } from 'rxjs';
 import { first } from 'rxjs/operators';
 import { EventTemplateIdentifier, CustomRecordingFormData } from './types';
diff --git a/src/app/CreateRecording/SnapshotRecordingForm.tsx b/src/app/CreateRecording/SnapshotRecordingForm.tsx
index 24568999b..f6fd221aa 100644
--- a/src/app/CreateRecording/SnapshotRecordingForm.tsx
+++ b/src/app/CreateRecording/SnapshotRecordingForm.tsx
@@ -20,7 +20,7 @@ import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { ActionGroup, Button, Form, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { first } from 'rxjs';
 
 export interface SnapshotRecordingFormProps {}
diff --git a/src/app/Dashboard/Charts/jfr/JFRMetricsChartCard.tsx b/src/app/Dashboard/Charts/jfr/JFRMetricsChartCard.tsx
index 6ebeb0af9..c2ce24808 100644
--- a/src/app/Dashboard/Charts/jfr/JFRMetricsChartCard.tsx
+++ b/src/app/Dashboard/Charts/jfr/JFRMetricsChartCard.tsx
@@ -43,7 +43,7 @@ import {
 import { DataSourceIcon, ExternalLinkAltIcon, SyncAltIcon, TachometerAltIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { interval } from 'rxjs';
 import { DashboardCard } from '../../DashboardCard';
 import { ChartContext } from '../context';
diff --git a/src/app/Dashboard/Dashboard.tsx b/src/app/Dashboard/Dashboard.tsx
index 5f33c0025..1f6697268 100644
--- a/src/app/Dashboard/Dashboard.tsx
+++ b/src/app/Dashboard/Dashboard.tsx
@@ -30,7 +30,7 @@ import { useCryostatTranslation } from '@i18n/i18nextUtil';
 import { Grid, GridItem } from '@patternfly/react-core';
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { AddCard } from './AddCard';
 import { ChartContext } from './Charts/context';
 import { JFRMetricsChartController } from './Charts/jfr/JFRMetricsChartController';
diff --git a/src/app/Dashboard/DashboardSolo.tsx b/src/app/Dashboard/DashboardSolo.tsx
index 0b31d82ef..0296dd843 100644
--- a/src/app/Dashboard/DashboardSolo.tsx
+++ b/src/app/Dashboard/DashboardSolo.tsx
@@ -27,7 +27,7 @@ import {
 import { MonitoringIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { CardConfig } from './types';
 import { getCardDescriptorByName } from './utils';
 
diff --git a/src/app/Events/EventTemplates.tsx b/src/app/Events/EventTemplates.tsx
index 83f63db38..42d182871 100644
--- a/src/app/Events/EventTemplates.tsx
+++ b/src/app/Events/EventTemplates.tsx
@@ -60,7 +60,7 @@ import {
 } from '@patternfly/react-table';
 import _ from 'lodash';
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { forkJoin, Observable, of } from 'rxjs';
 import { catchError, concatMap, defaultIfEmpty, first, tap } from 'rxjs/operators';
 
diff --git a/src/app/Events/Events.tsx b/src/app/Events/Events.tsx
index ce67be295..0ffbd0698 100644
--- a/src/app/Events/Events.tsx
+++ b/src/app/Events/Events.tsx
@@ -22,7 +22,7 @@ import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { getActiveTab, switchTab } from '@app/utils/utils';
 import { Card, CardBody, Tab, Tabs, Tooltip } from '@patternfly/react-core';
 import * as React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { concatMap, filter } from 'rxjs';
 import { EventTemplates } from './EventTemplates';
 import { EventTypes } from './EventTypes';
diff --git a/src/app/NotFound/NotFound.tsx b/src/app/NotFound/NotFound.tsx
index ffa3cafd7..c86f03321 100644
--- a/src/app/NotFound/NotFound.tsx
+++ b/src/app/NotFound/NotFound.tsx
@@ -32,7 +32,7 @@ import {
 } from '@patternfly/react-core';
 import { MapMarkedAltIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { NotFoundCard } from './NotFoundCard';
 
 export interface NotFoundProps {}
diff --git a/src/app/NotFound/NotFoundCard.tsx b/src/app/NotFound/NotFoundCard.tsx
index a7decf899..1045317a8 100644
--- a/src/app/NotFound/NotFoundCard.tsx
+++ b/src/app/NotFound/NotFoundCard.tsx
@@ -16,7 +16,7 @@
 
 import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 
 export interface NotFoundCardProps {
   title: React.ReactNode;
diff --git a/src/app/Recordings/ActiveRecordingsTable.tsx b/src/app/Recordings/ActiveRecordingsTable.tsx
index e8f61b602..876719602 100644
--- a/src/app/Recordings/ActiveRecordingsTable.tsx
+++ b/src/app/Recordings/ActiveRecordingsTable.tsx
@@ -88,7 +88,7 @@ import { EllipsisVIcon, RedoIcon } from '@patternfly/react-icons';
 import { ExpandableRowContent, SortByDirection, Tbody, Td, Tr } from '@patternfly/react-table';
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { combineLatest, forkJoin, merge, Observable } from 'rxjs';
 import { concatMap, filter, first } from 'rxjs/operators';
 import { DeleteWarningModal } from '../Modal/DeleteWarningModal';
diff --git a/src/app/Recordings/Recordings.tsx b/src/app/Recordings/Recordings.tsx
index fbb11ca99..fa5f09fc5 100644
--- a/src/app/Recordings/Recordings.tsx
+++ b/src/app/Recordings/Recordings.tsx
@@ -19,7 +19,7 @@ import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { getActiveTab, switchTab } from '@app/utils/utils';
 import { Card, CardBody, CardTitle, Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 import * as React from 'react';
-import { useLocation, useNavigate } from 'react-router';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { ActiveRecordingsTable } from './ActiveRecordingsTable';
 import { ArchivedRecordingsTable } from './ArchivedRecordingsTable';
 
diff --git a/src/app/Rules/CreateRule.tsx b/src/app/Rules/CreateRule.tsx
index 63138839f..41be5a7e7 100644
--- a/src/app/Rules/CreateRule.tsx
+++ b/src/app/Rules/CreateRule.tsx
@@ -58,7 +58,7 @@ import { HelpIcon } from '@patternfly/react-icons';
 import _ from 'lodash';
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { combineLatest, forkJoin, iif, of, Subject } from 'rxjs';
 import { catchError, debounceTime, map, switchMap, tap } from 'rxjs/operators';
 import { RuleFormData } from './types';
diff --git a/src/app/Rules/Rules.tsx b/src/app/Rules/Rules.tsx
index 28d0eb164..18381059c 100644
--- a/src/app/Rules/Rules.tsx
+++ b/src/app/Rules/Rules.tsx
@@ -22,6 +22,7 @@ import { Rule, NotificationCategory } from '@app/Shared/Services/api.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { TableColumn, formatBytes, formatDuration, sortResources, portalRoot } from '@app/utils/utils';
+import { useCryostatTranslation } from '@i18n/i18nextUtil';
 import {
   Button,
   Card,
@@ -59,12 +60,11 @@ import {
 import _ from 'lodash';
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom-v5-compat';
 import { first } from 'rxjs/operators';
 import { RuleDeleteWarningModal } from './RuleDeleteWarningModal';
 import { RuleUploadModal } from './RulesUploadModal';
 import { RuleToDeleteOrDisable } from './types';
-import { useCryostatTranslation } from '@i18n/i18nextUtil';
 
 export interface RulesTableProps {}
 
diff --git a/src/app/Settings/Settings.tsx b/src/app/Settings/Settings.tsx
index 18fc7370c..5976b2fc2 100644
--- a/src/app/Settings/Settings.tsx
+++ b/src/app/Settings/Settings.tsx
@@ -38,7 +38,7 @@ import {
 } from '@patternfly/react-core';
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { AutomatedAnalysis } from './Config/AutomatedAnalysis';
 import { AutoRefresh } from './Config/AutoRefresh';
 import { ChartCards } from './Config/ChartCards';
diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
index 081b1cd7a..e58e72f25 100644
--- a/src/app/TargetView/TargetContextSelector.tsx
+++ b/src/app/TargetView/TargetContextSelector.tsx
@@ -40,7 +40,7 @@ import {
 } from '@patternfly/react-core';
 import _ from 'lodash';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 
 export interface TargetContextSelectorProps {
   className?: string;
diff --git a/src/app/Topology/Actions/CreateTarget.tsx b/src/app/Topology/Actions/CreateTarget.tsx
index fc9d1d48b..03c4958cd 100644
--- a/src/app/Topology/Actions/CreateTarget.tsx
+++ b/src/app/Topology/Actions/CreateTarget.tsx
@@ -55,7 +55,7 @@ import {
 import { CheckCircleIcon, ExclamationCircleIcon, PendingIcon, SyncAltIcon } from '@patternfly/react-icons';
 import { css } from '@patternfly/react-styles';
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 
 export const isValidTargetConnectURL = (connectUrl?: string) => connectUrl && !connectUrl.match(/\s+/);
 
diff --git a/src/app/Topology/Actions/NodeActions.tsx b/src/app/Topology/Actions/NodeActions.tsx
index 76f4c3def..93269c7a6 100644
--- a/src/app/Topology/Actions/NodeActions.tsx
+++ b/src/app/Topology/Actions/NodeActions.tsx
@@ -29,7 +29,7 @@ import {
 import { css } from '@patternfly/react-styles';
 import { ContextMenuItem as PFContextMenuItem } from '@patternfly/react-topology';
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { Observable, Subject, switchMap } from 'rxjs';
 import { GraphElement, ListElement } from '../Shared/types';
 import { ActionUtils, MenuItemComponent, MenuItemVariant, NodeActionFunction } from './types';
diff --git a/src/app/Topology/Actions/QuickSearchPanel.tsx b/src/app/Topology/Actions/QuickSearchPanel.tsx
index caa6d2432..c63b33cca 100644
--- a/src/app/Topology/Actions/QuickSearchPanel.tsx
+++ b/src/app/Topology/Actions/QuickSearchPanel.tsx
@@ -48,7 +48,7 @@ import { css } from '@patternfly/react-styles';
 import { useHover } from '@patternfly/react-topology';
 import _ from 'lodash';
 import * as React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom-v5-compat';
 import QuickSearchIcon from '../../Shared/Components/QuickSearchIcon';
 import quickSearches, { QuickSearchId, quickSearchIds } from './quicksearches/all-quick-searches';
 import { QuickSearchItem } from './types';
diff --git a/src/app/Topology/Actions/WarningResolver.tsx b/src/app/Topology/Actions/WarningResolver.tsx
index 033097802..e7c6766ec 100644
--- a/src/app/Topology/Actions/WarningResolver.tsx
+++ b/src/app/Topology/Actions/WarningResolver.tsx
@@ -19,7 +19,7 @@ import { NotificationsContext } from '@app/Shared/Services/Notifications.service
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { Button, ButtonProps } from '@patternfly/react-core';
 import * as React from 'react';
-import { Link, LinkProps, useNavigate } from 'react-router-dom';
+import { Link, LinkProps, useNavigate } from 'react-router-dom-v5-compat';
 import { ActionUtils } from './types';
 
 export interface WarningResolverAsLinkProps extends LinkProps {}
diff --git a/src/app/Topology/Actions/types.ts b/src/app/Topology/Actions/types.ts
index 5f45e44c2..893049f08 100644
--- a/src/app/Topology/Actions/types.ts
+++ b/src/app/Topology/Actions/types.ts
@@ -20,7 +20,7 @@ import { Services } from '@app/Shared/Services/Services';
 import { LabelProps, DropdownItemProps } from '@patternfly/react-core';
 import { ContextMenuItem as PFContextMenuItem } from '@patternfly/react-topology';
 import * as React from 'react';
-import { NavigateFunction } from 'react-router-dom';
+import { NavigateFunction } from 'react-router-dom-v5-compat';
 import { Observable } from 'rxjs';
 import type { GraphElement, ListElement } from '../Shared/types';
 
diff --git a/src/app/Topology/Entity/EntityDetails.tsx b/src/app/Topology/Entity/EntityDetails.tsx
index 64cb5deda..008c061e5 100644
--- a/src/app/Topology/Entity/EntityDetails.tsx
+++ b/src/app/Topology/Entity/EntityDetails.tsx
@@ -50,7 +50,7 @@ import { css } from '@patternfly/react-styles';
 import { ExpandableRowContent, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { GraphElement, NodeStatus } from '@patternfly/react-topology';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { catchError, concatMap, map, of } from 'rxjs';
 import { EmptyText } from '../../Shared/Components/EmptyText';
 import { NodeAction } from '../Actions/types';
diff --git a/src/app/Topology/Entity/utils.tsx b/src/app/Topology/Entity/utils.tsx
index ab319260a..34f3b39fd 100644
--- a/src/app/Topology/Entity/utils.tsx
+++ b/src/app/Topology/Entity/utils.tsx
@@ -35,7 +35,7 @@ import {
   Popover,
 } from '@patternfly/react-core';
 import * as React from 'react';
-import { LinkProps } from 'react-router-dom';
+import { LinkProps } from 'react-router-dom-v5-compat';
 import {
   catchError,
   combineLatest,
diff --git a/src/app/Topology/Shared/Components/TopologyEmptyState.tsx b/src/app/Topology/Shared/Components/TopologyEmptyState.tsx
index 05d77e880..58d4786cc 100644
--- a/src/app/Topology/Shared/Components/TopologyEmptyState.tsx
+++ b/src/app/Topology/Shared/Components/TopologyEmptyState.tsx
@@ -30,7 +30,7 @@ import {
 import { TopologyIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { DiscoveryTreeContext } from '../utils';
 
 export interface TopologyEmptyStateProps {}
diff --git a/src/app/index.tsx b/src/app/index.tsx
index 4c96f6346..1d1baf75a 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -27,7 +27,7 @@ import { NotificationsContext, NotificationsInstance } from '@app/Shared/Service
 import { ServiceContext, defaultServices } from '@app/Shared/Services/Services';
 import * as React from 'react';
 import { Provider } from 'react-redux';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom-v5-compat';
 import { JoyrideProvider } from './Joyride/JoyrideProvider';
 
 export const App: React.FC = () => (
diff --git a/src/app/routes.tsx b/src/app/routes.tsx
index 0c5b5bfd8..ac2aa8506 100644
--- a/src/app/routes.tsx
+++ b/src/app/routes.tsx
@@ -15,7 +15,7 @@
  */
 
 import * as React from 'react';
-import { useLocation, Route, Routes } from 'react-router-dom';
+import { useLocation, Route, Routes } from 'react-router-dom-v5-compat';
 import About from './About/About';
 import Archives from './Archives/Archives';
 import CreateRecording from './CreateRecording/CreateRecording';
diff --git a/src/app/utils/utils.ts b/src/app/utils/utils.ts
index bde7acec7..d0275a422 100644
--- a/src/app/utils/utils.ts
+++ b/src/app/utils/utils.ts
@@ -19,7 +19,7 @@ import { ISortBy, SortByDirection, ThProps } from '@patternfly/react-table';
 import humanizeDuration from 'humanize-duration';
 import { TFunction } from 'i18next';
 import _ from 'lodash';
-import { NavigateFunction } from 'react-router-dom';
+import { NavigateFunction } from 'react-router-dom-v5-compat';
 import { BehaviorSubject, Observable } from 'rxjs';
 import semverGt from 'semver/functions/gt';
 import semverValid from 'semver/functions/valid';
diff --git a/src/test/CreateRecording/CustomRecordingForm.test.tsx b/src/test/CreateRecording/CustomRecordingForm.test.tsx
index e14493aaa..d5702e6a9 100644
--- a/src/test/CreateRecording/CustomRecordingForm.test.tsx
+++ b/src/test/CreateRecording/CustomRecordingForm.test.tsx
@@ -30,8 +30,8 @@ jest.mock('@patternfly/react-core', () => ({
 
 const mockNavigate = jest.fn();
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router-dom-v5-compat', () => ({
+  ...jest.requireActual('react-router-dom-v5-compat'),
   useNavigate: () => mockNavigate,
 }));
 
diff --git a/src/test/CreateRecording/SnapshotRecordingForm.test.tsx b/src/test/CreateRecording/SnapshotRecordingForm.test.tsx
index 99725f97f..442707535 100644
--- a/src/test/CreateRecording/SnapshotRecordingForm.test.tsx
+++ b/src/test/CreateRecording/SnapshotRecordingForm.test.tsx
@@ -57,8 +57,8 @@ jest.spyOn(defaultServices.target, 'authRetry').mockReturnValue(of());
 
 const mockNavigate = jest.fn();
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router-dom-v5-compat', () => ({
+  ...jest.requireActual('react-router-dom-v5-compat'),
   useNavigate: () => mockNavigate,
 }));
 
diff --git a/src/test/Dashboard/Charts/jfr/JFRMetricsChartCard.test.tsx b/src/test/Dashboard/Charts/jfr/JFRMetricsChartCard.test.tsx
index 4f1c9bc59..856f58956 100644
--- a/src/test/Dashboard/Charts/jfr/JFRMetricsChartCard.test.tsx
+++ b/src/test/Dashboard/Charts/jfr/JFRMetricsChartCard.test.tsx
@@ -60,8 +60,8 @@ const mockChartContext = {
 
 const mockNavigate = jest.fn();
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router-dom-v5-compat', () => ({
+  ...jest.requireActual('react-router-dom-v5-compat'),
   useNavigate: () => mockNavigate,
 }));
 
diff --git a/src/test/Rules/CreateRule.test.tsx b/src/test/Rules/CreateRule.test.tsx
index e7f7145df..137a1a780 100644
--- a/src/test/Rules/CreateRule.test.tsx
+++ b/src/test/Rules/CreateRule.test.tsx
@@ -65,8 +65,8 @@ const mockRule: Rule = {
 
 const mockNavigate = jest.fn();
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router-dom-v5-compat', () => ({
+  ...jest.requireActual('react-router-dom-v5-compat'),
   useNavigate: () => mockNavigate,
 }));
 
diff --git a/src/test/Settings/Settings.test.tsx b/src/test/Settings/Settings.test.tsx
index 91ca2996b..5c0fc819e 100644
--- a/src/test/Settings/Settings.test.tsx
+++ b/src/test/Settings/Settings.test.tsx
@@ -119,8 +119,8 @@ jest.mock('@app/Settings/Config/Theme', () => ({
 
 const mockNavigate = jest.fn();
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router-dom-v5-compat', () => ({
+  ...jest.requireActual('react-router-dom-v5-compat'),
   useNavigate: () => mockNavigate,
 }));
 
diff --git a/src/test/utils.tsx b/src/test/utils.tsx
index 01e111df6..928a3a4b1 100644
--- a/src/test/utils.tsx
+++ b/src/test/utils.tsx
@@ -31,7 +31,7 @@ import userEvent from '@testing-library/user-event';
 import { t, TOptions } from 'i18next';
 import * as React from 'react';
 import { Provider } from 'react-redux';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router-dom-v5-compat';
 import renderer from 'react-test-renderer';
 
 export interface ProviderInstance<T> {
diff --git a/yarn.lock b/yarn.lock
index f8b672d2a..816ff9210 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -430,6 +430,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.13":
+  version: 7.26.0
+  resolution: "@babel/runtime@npm:7.26.0"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: c8e2c0504ab271b3467a261a8f119bf2603eb857a0d71e37791f4e3fae00f681365073cc79f141ddaa90c6077c60ba56448004ad5429d07ac73532be9f7cf28a
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.9.2":
   version: 7.20.13
   resolution: "@babel/runtime@npm:7.20.13"
@@ -1561,10 +1570,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.19.2":
-  version: 1.19.2
-  resolution: "@remix-run/router@npm:1.19.2"
-  checksum: fb2f297b392c75b34c73981e1ef3ce31edd88448bc4ffc2fbc3386e705470d7537ca89e901ec57c07f3cca3a771151f58f7ed6bfcb3e8ef929596637984f068b
+"@remix-run/router@npm:1.21.0":
+  version: 1.21.0
+  resolution: "@remix-run/router@npm:1.21.0"
+  checksum: d9477a7772053ad0ffcf03385cfb1a54e56f8a56d1f9f5062de3b1dfcbd019dd73282a00a5a72aa55c120771110982448c165c1405d64540aaef13051a8e45cc
   languageName: node
   linkType: hard
 
@@ -4402,7 +4411,8 @@ __metadata:
     react-i18next: ^15.1.0
     react-joyride: ^2.9.2
     react-redux: ^8.0.5
-    react-router-dom: ^6.26.2
+    react-router-dom: 5.3.x
+    react-router-dom-v5-compat: ^6.11.2
     react-test-renderer: ^17.0.2
     regenerator-runtime: ^0.14.1
     rimraf: ^6.0.1
@@ -7434,7 +7444,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"history@npm:^5.0.0":
+"history@npm:^4.9.0":
+  version: 4.10.1
+  resolution: "history@npm:4.10.1"
+  dependencies:
+    "@babel/runtime": ^7.1.2
+    loose-envify: ^1.2.0
+    resolve-pathname: ^3.0.0
+    tiny-invariant: ^1.0.2
+    tiny-warning: ^1.0.0
+    value-equal: ^1.0.1
+  checksum: addd84bc4683929bae4400419b5af132ff4e4e9b311a0d4e224579ea8e184a6b80d7f72c55927e4fa117f69076a9e47ce082d8d0b422f1a9ddac7991490ca1d0
+  languageName: node
+  linkType: hard
+
+"history@npm:^5.0.0, history@npm:^5.3.0":
   version: 5.3.0
   resolution: "history@npm:5.3.0"
   dependencies:
@@ -7443,7 +7467,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -8483,6 +8507,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isarray@npm:0.0.1":
+  version: 0.0.1
+  resolution: "isarray@npm:0.0.1"
+  checksum: 49191f1425681df4a18c2f0f93db3adb85573bcdd6a4482539d98eac9e705d8961317b01175627e860516a2fc45f8f9302db26e5a380a97a520e272e2a40a8d4
+  languageName: node
+  linkType: hard
+
 "isarray@npm:^2.0.5":
   version: 2.0.5
   resolution: "isarray@npm:2.0.5"
@@ -9515,7 +9546,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.1.0, loose-envify@npm:^1.2.0, loose-envify@npm:^1.3.1, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -10685,6 +10716,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-to-regexp@npm:^1.7.0":
+  version: 1.9.0
+  resolution: "path-to-regexp@npm:1.9.0"
+  dependencies:
+    isarray: 0.0.1
+  checksum: 5b2ac9cab2a9f82effd30a35164b20998b18d99d96608281dd2cab6e66c0e4536187970369b185ab21d3815da1ecb7dcb2d5f97a4bf0ee6e31a9612299fca147
+  languageName: node
+  linkType: hard
+
 "path-type@npm:^3.0.0":
   version: 3.0.0
   resolution: "path-type@npm:3.0.0"
@@ -11480,7 +11520,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
+"react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f
@@ -11563,27 +11603,65 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^6.26.2":
-  version: 6.26.2
-  resolution: "react-router-dom@npm:6.26.2"
+"react-router-dom-v5-compat@npm:^6.11.2":
+  version: 6.28.1
+  resolution: "react-router-dom-v5-compat@npm:6.28.1"
   dependencies:
-    "@remix-run/router": 1.19.2
-    react-router: 6.26.2
+    "@remix-run/router": 1.21.0
+    history: ^5.3.0
+    react-router: 6.28.1
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: d65507ffb920e03212bf32d294eb608df7f6cb85c26ec24f88e8f2a2718ffedeccfe0a8e1bc8d23561d6d796f8af61a8bed4a9a0541fbfd83096ecc93eaad5c7
+    react-router-dom: 4 || 5
+  checksum: 7925523df69335e7b5407e818a91fe44ae2fc59340f8300c58bc3c83e91a5ecdc6a84f100e67adc08658e91165d1cbed76678e6e3ddf0d2d189c7fcba0f79b55
+  languageName: node
+  linkType: hard
+
+"react-router-dom@npm:5.3.x":
+  version: 5.3.4
+  resolution: "react-router-dom@npm:5.3.4"
+  dependencies:
+    "@babel/runtime": ^7.12.13
+    history: ^4.9.0
+    loose-envify: ^1.3.1
+    prop-types: ^15.6.2
+    react-router: 5.3.4
+    tiny-invariant: ^1.0.2
+    tiny-warning: ^1.0.0
+  peerDependencies:
+    react: ">=15"
+  checksum: b86a6f2f5222f041e38adf4e4b32c7643d6735a1a915ef25855b2db285fd059d72ba8d62e5bcd5d822b8ef9520a80453209e55077f5a90d0f72e908979b8f535
+  languageName: node
+  linkType: hard
+
+"react-router@npm:5.3.4":
+  version: 5.3.4
+  resolution: "react-router@npm:5.3.4"
+  dependencies:
+    "@babel/runtime": ^7.12.13
+    history: ^4.9.0
+    hoist-non-react-statics: ^3.1.0
+    loose-envify: ^1.3.1
+    path-to-regexp: ^1.7.0
+    prop-types: ^15.6.2
+    react-is: ^16.6.0
+    tiny-invariant: ^1.0.2
+    tiny-warning: ^1.0.0
+  peerDependencies:
+    react: ">=15"
+  checksum: 892d4e274a23bf4f39abc2efca54472fb646d3aed4b584020cf49654d2f50d09a2bacebe7c92b4ec7cb8925077376dfcd0664bad6442a73604397cefec9f01f9
   languageName: node
   linkType: hard
 
-"react-router@npm:6.26.2":
-  version: 6.26.2
-  resolution: "react-router@npm:6.26.2"
+"react-router@npm:6.28.1":
+  version: 6.28.1
+  resolution: "react-router@npm:6.28.1"
   dependencies:
-    "@remix-run/router": 1.19.2
+    "@remix-run/router": 1.21.0
   peerDependencies:
     react: ">=16.8"
-  checksum: 80ad9db316ad11761b7d5de0c9ed61f3e4345d8984929db802d37d9a6a2174b42a952b0b01ba45833b00f8cd7b5755f198d2f0a8a62a486ebbfbacabbe379be5
+  checksum: c1c4fe644a7197437f9ce9b8b621e79f9620b7a7b1192c9d1d44a6971b08af94408f3e63bd2cf122903c27d9a73b2e5632e4ca428e9ac0bf1d61e325968d4994
   languageName: node
   linkType: hard
 
@@ -11884,6 +11962,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve-pathname@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "resolve-pathname@npm:3.0.0"
+  checksum: 6147241ba42c423dbe83cb067a2b4af4f60908c3af57e1ea567729cc71416c089737fe2a73e9e79e7a60f00f66c91e4b45ad0d37cd4be2d43fec44963ef14368
+  languageName: node
+  linkType: hard
+
 "resolve.exports@npm:^1.1.0":
   version: 1.1.1
   resolution: "resolve.exports@npm:1.1.1"
@@ -13367,6 +13452,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tiny-invariant@npm:^1.0.2":
+  version: 1.3.3
+  resolution: "tiny-invariant@npm:1.3.3"
+  checksum: 5e185c8cc2266967984ce3b352a4e57cb89dad5a8abb0dea21468a6ecaa67cd5bb47a3b7a85d08041008644af4f667fb8b6575ba38ba5fb00b3b5068306e59fe
+  languageName: node
+  linkType: hard
+
+"tiny-warning@npm:^1.0.0":
+  version: 1.0.3
+  resolution: "tiny-warning@npm:1.0.3"
+  checksum: da62c4acac565902f0624b123eed6dd3509bc9a8d30c06e017104bedcf5d35810da8ff72864400ad19c5c7806fc0a8323c68baf3e326af7cb7d969f846100d71
+  languageName: node
+  linkType: hard
+
 "tmp@npm:^0.2.3":
   version: 0.2.3
   resolution: "tmp@npm:0.2.3"
@@ -14026,6 +14125,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"value-equal@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "value-equal@npm:1.0.1"
+  checksum: bb7ae1facc76b5cf8071aeb6c13d284d023fdb370478d10a5d64508e0e6e53bb459c4bbe34258df29d82e6f561f874f0105eba38de0e61fe9edd0bdce07a77a2
+  languageName: node
+  linkType: hard
+
 "value-or-function@npm:^4.0.0":
   version: 4.0.0
   resolution: "value-or-function@npm:4.0.0"