diff --git a/apps/assisted-ui/package.json b/apps/assisted-ui/package.json
index 3a8d5b2020..c8eebc537e 100644
--- a/apps/assisted-ui/package.json
+++ b/apps/assisted-ui/package.json
@@ -22,6 +22,7 @@
     "react-monaco-editor": "^0.55.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^5.3.3",
+    "react-router-dom-v5-compat": "^6.21.2",
     "react-tagsinput": "^3.20",
     "redux": "^4",
     "uuid": "^8.1",
@@ -31,7 +32,6 @@
   "devDependencies": {
     "@tsconfig/vite-react": "^1.0.1",
     "@types/react": "17.0.x",
-    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react-swc": "^3.0.1",
     "vite": "^4.5.3",
     "vite-plugin-environment": "^1.1.3"
diff --git a/apps/assisted-ui/src/components/App.tsx b/apps/assisted-ui/src/components/App.tsx
index 5c789c7726..d7df97cf23 100755
--- a/apps/assisted-ui/src/components/App.tsx
+++ b/apps/assisted-ui/src/components/App.tsx
@@ -1,19 +1,22 @@
 import type React from 'react';
-import { BrowserRouter, Route } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
+import { CompatRouter, Route } from 'react-router-dom-v5-compat';
 import { Page } from '@patternfly/react-core';
 import * as OCM from '@openshift-assisted/ui-lib/ocm';
 import { Header } from './Header';
 import '../i18n';
 
-const { HostsClusterDetailTabMock, Routes, Features, Config } = OCM;
+const { HostsClusterDetailTabMock, UILibRoutes, Features, Config } = OCM;
 window.__app__ = { OCM };
 
 export const App: React.FC = () => (
   <BrowserRouter basename={Config.routeBasePath}>
-    <Page header={<Header />} isManagedSidebar defaultManagedSidebarIsOpen={false}>
-      <Routes allEnabledFeatures={Features.STANDALONE_DEPLOYMENT_ENABLED_FEATURES}>
-        <Route path={'/day2-flow-mock'} component={HostsClusterDetailTabMock} />
-      </Routes>
-    </Page>
+    <CompatRouter>
+      <Page header={<Header />} isManagedSidebar defaultManagedSidebarIsOpen={false}>
+        <UILibRoutes allEnabledFeatures={Features.STANDALONE_DEPLOYMENT_ENABLED_FEATURES}>
+          <Route path={'/day2-flow-mock'} element={<HostsClusterDetailTabMock />} />
+        </UILibRoutes>
+      </Page>
+    </CompatRouter>
   </BrowserRouter>
 );
diff --git a/libs/ui-lib/lib/cim/components/Agent/NoAgentsAlert.tsx b/libs/ui-lib/lib/cim/components/Agent/NoAgentsAlert.tsx
index 14dce25c26..2da665f1fd 100644
--- a/libs/ui-lib/lib/cim/components/Agent/NoAgentsAlert.tsx
+++ b/libs/ui-lib/lib/cim/components/Agent/NoAgentsAlert.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Alert, AlertVariant, List, ListComponent, ListItem } from '@patternfly/react-core';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { CpuArchitecture } from '../../../common';
diff --git a/libs/ui-lib/lib/cim/components/Agent/tableUtils.tsx b/libs/ui-lib/lib/cim/components/Agent/tableUtils.tsx
index e9e00d2c3f..0c1025cc88 100644
--- a/libs/ui-lib/lib/cim/components/Agent/tableUtils.tsx
+++ b/libs/ui-lib/lib/cim/components/Agent/tableUtils.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { sortable, expandable, breakWord } from '@patternfly/react-table';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 
 import {
   HostsTableActions,
diff --git a/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx b/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx
index 94ac8eb68d..a78a6bbcf3 100644
--- a/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx
+++ b/libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/NodePoolsTable.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { Button, Label, Popover, Stack, StackItem } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
 import {
diff --git a/libs/ui-lib/lib/cim/components/InfraEnv/AddHostDropdown.tsx b/libs/ui-lib/lib/cim/components/InfraEnv/AddHostDropdown.tsx
index 9cb5b7fc18..5eb812fad5 100644
--- a/libs/ui-lib/lib/cim/components/InfraEnv/AddHostDropdown.tsx
+++ b/libs/ui-lib/lib/cim/components/InfraEnv/AddHostDropdown.tsx
@@ -14,7 +14,7 @@ import { AddHostDropdownProps } from './types';
 import './AddHostDropdown.css';
 import { PopoverIcon } from '../../../common';
 import { Trans } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 
 type ModalType = 'iso' | 'bmc' | 'yaml' | 'ipxe' | undefined;
 
diff --git a/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimConfigProgressAlert.tsx b/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimConfigProgressAlert.tsx
index 0ee0becccb..b9b9bddac2 100644
--- a/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimConfigProgressAlert.tsx
+++ b/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimConfigProgressAlert.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import {
   Alert,
   AlertVariant,
@@ -26,7 +26,7 @@ export const CimConfigProgressAlert: React.FC<CimConfigProgressAlertProps> = ({
   assistedServiceDeploymentUrl,
 }) => {
   const { t } = useTranslation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const [hideSuccess, setHideSuccess] = React.useState(true);
 
   React.useEffect(
@@ -68,7 +68,7 @@ export const CimConfigProgressAlert: React.FC<CimConfigProgressAlertProps> = ({
       variant={ButtonVariant.link}
       isInline
       key="assisted-service-deployment"
-      onClick={() => history.push(assistedServiceDeploymentUrl)}
+      onClick={() => navigate(assistedServiceDeploymentUrl)}
     >
       {t('ai:Troubleshoot in the assisted service deployment')} <ExternalLinkAltIcon />
     </Button>
diff --git a/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimStorageMissingAlert.tsx b/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimStorageMissingAlert.tsx
index c003176d5c..3358f50205 100644
--- a/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimStorageMissingAlert.tsx
+++ b/libs/ui-lib/lib/cim/components/modals/CimConfiguration/CimStorageMissingAlert.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { Alert, AlertActionLink, AlertVariant } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
@@ -10,7 +10,7 @@ export const CimStorageMissingAlert: React.FC<{
   storageOperatorUrl: string;
 }> = ({ docStorageUrl, storageOperatorUrl }) => {
   const { t } = useTranslation();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const contentWorkaround = (
     <>
@@ -20,10 +20,7 @@ export const CimStorageMissingAlert: React.FC<{
   );
 
   const actionLinks: React.ReactNode[] = [
-    <AlertActionLink
-      key="install-storage-operator"
-      onClick={() => history.push(storageOperatorUrl)}
-    >
+    <AlertActionLink key="install-storage-operator" onClick={() => navigate(storageOperatorUrl)}>
       {t('ai:Install storage operator')}
     </AlertActionLink>,
     <AlertActionLink key="storage-class" onClick={() => window.open(docStorageUrl, '_blank')}>
diff --git a/libs/ui-lib/lib/cim/components/modals/MassDeleteAgentModal.tsx b/libs/ui-lib/lib/cim/components/modals/MassDeleteAgentModal.tsx
index ce2a83f302..42daf6455a 100644
--- a/libs/ui-lib/lib/cim/components/modals/MassDeleteAgentModal.tsx
+++ b/libs/ui-lib/lib/cim/components/modals/MassDeleteAgentModal.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button, Flex, FlexItem, Popover } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { sortable } from '@patternfly/react-table';
 import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
 import {
diff --git a/libs/ui-lib/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabMock.tsx b/libs/ui-lib/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabMock.tsx
index bd95a35d31..53f95a3cfe 100644
--- a/libs/ui-lib/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabMock.tsx
+++ b/libs/ui-lib/lib/ocm/components/HostsClusterDetailTab/HostsClusterDetailTabMock.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
 import {
   ButtonVariant,
   EmptyState,
@@ -9,7 +8,6 @@ import {
   PageSectionVariants,
   EmptyStateHeader,
 } from '@patternfly/react-core';
-import { HostsClusterDetailTabProps } from './types';
 import {
   OcmCpuArchitecture,
   STANDALONE_DEPLOYMENT_ENABLED_FEATURES,
@@ -44,9 +42,7 @@ const getCluster = (type: string) => {
   }
 };
 
-export const HostsClusterDetailTabMock: React.FC<
-  RouteComponentProps & HostsClusterDetailTabProps
-> = () => {
+export const HostsClusterDetailTabMock = () => {
   const [tabShown, setTabShown] = React.useState<string>('');
   const [isMocked, setIsMocked] = React.useState<boolean>(false);
 
diff --git a/libs/ui-lib/lib/ocm/components/Routes.tsx b/libs/ui-lib/lib/ocm/components/Routes.tsx
index c5224d9ac4..78c270e54a 100644
--- a/libs/ui-lib/lib/ocm/components/Routes.tsx
+++ b/libs/ui-lib/lib/ocm/components/Routes.tsx
@@ -1,29 +1,33 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { Switch, Route, Redirect } from 'react-router-dom';
+import { Routes, Route, Navigate, Outlet } from 'react-router-dom-v5-compat';
 import { Clusters, ClusterPage, NewClusterPage } from './clusters';
 import type { FeatureListType } from '../../common/features/featureGate';
-import { routeBasePath } from '../config';
 import { AssistedUILibVersion } from './ui';
 import { storeDay1 } from '../store';
 import { useFeatureDetection } from '../hooks/use-feature-detection';
 
-export const Routes: React.FC<{ allEnabledFeatures: FeatureListType }> = ({
+export const UILibRoutes = ({
   allEnabledFeatures,
   children,
+}: {
+  allEnabledFeatures: FeatureListType;
+  children?: React.ReactNode;
 }) => {
   useFeatureDetection(allEnabledFeatures);
 
   return (
     <Provider store={storeDay1}>
       <AssistedUILibVersion />
-      <Switch>
-        <Route path={`${routeBasePath}/clusters/~new`} component={NewClusterPage} />
-        <Route path={`${routeBasePath}/clusters/:clusterId`} component={ClusterPage} />
-        <Route path={`${routeBasePath}/clusters`} component={Clusters} />
+      <Routes>
+        <Route path="clusters" element={<Outlet />}>
+          <Route path="~new" element={<NewClusterPage />} />
+          <Route path=":clusterId" element={<ClusterPage />} />
+          <Route index element={<Clusters />} />
+        </Route>
         {children}
-        <Redirect to={`${routeBasePath}/clusters`} />
-      </Switch>
+        <Route path="*" element={<Navigate to="clusters" />} />
+      </Routes>
     </Provider>
   );
 };
diff --git a/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx b/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx
index fea2a67fb1..363d2b7aaf 100644
--- a/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterDetail/AssistedInstallerDetailCard.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { Card, CardBody, CardHeader, Title } from '@patternfly/react-core';
 import { storeDay1 } from '../../store';
-import { OCM_CLUSTER_LIST_LINK } from '../../config';
 import {
   AlertsContextProvider,
   AssistedInstallerOCMPermissionTypesListType,
@@ -29,8 +28,8 @@ import { NewFeatureSupportLevelProvider } from '../featureSupportLevels';
 import { usePullSecret } from '../../hooks';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useFeatureDetection } from '../../hooks/use-feature-detection';
-import { BrowserRouter } from 'react-router-dom';
 import { OpenshiftVersionsContextProvider } from '../clusterWizard/OpenshiftVersionsContext';
+import { BrowserRouter } from 'react-router-dom-v5-compat';
 
 type AssistedInstallerDetailCardProps = {
   aiClusterId: string;
@@ -65,7 +64,7 @@ const ClusterLoadFailed = ({ clusterId, error }: { clusterId: Cluster['id']; err
           <ErrorState
             title="Failed to fetch the cluster"
             fetchData={fetchCluster}
-            actions={[<BackButton key={'cancel'} to={OCM_CLUSTER_LIST_LINK} />]}
+            actions={[<BackButton key={'cancel'} to={'..'} />]}
             content={error}
           />
         </BrowserRouter>
@@ -85,7 +84,7 @@ const LoadingDefaultConfigFailedCard = () => (
       <BrowserRouter>
         <ErrorState
           title="Failed to retrieve the default configuration"
-          actions={[<BackButton key={'cancel'} to={OCM_CLUSTER_LIST_LINK} />]}
+          actions={[<BackButton key={'cancel'} to={'..'} />]}
         />
       </BrowserRouter>
     </CardBody>
diff --git a/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetail.tsx b/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetail.tsx
index 3633bdfd10..7ad8e5caf7 100644
--- a/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetail.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetail.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import {
   Stack,
   StackItem,
@@ -40,7 +40,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ cluster }) => {
   const isSNOExpansionAllowed =
     featureSupportLevelContext.isFeatureSupported('SINGLE_NODE_EXPANSION');
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
-  const history = useHistory();
+  const navigate = useNavigate();
   const canAddHosts =
     (!isSNO(cluster) || isSNOExpansionAllowed) && cluster.status === 'installed' && !isInOcm;
 
@@ -49,13 +49,13 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ cluster }) => {
       try {
         const { data } = await ClustersAPI.allowAddHosts(cluster.id);
         updateCluster(data);
-        history.push(`${routeBasePath}/clusters/${cluster.id}`);
+        navigate(`${routeBasePath}/clusters/${cluster.id}`);
       } catch (e) {
         handleApiError(e);
       }
     };
     void doItAsync();
-  }, [cluster.id, history]);
+  }, [cluster.id, navigate]);
 
   return (
     <Stack hasGutter>
@@ -112,7 +112,7 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ cluster }) => {
           {!isSingleClusterFeatureEnabled && (
             <ToolbarButton
               variant={ButtonVariant.link}
-              onClick={() => history.push(`${routeBasePath}/clusters`)}
+              onClick={() => navigate('..')}
               id={getClusterDetailId('button-back-to-all-clusters')}
             >
               Back to all clusters
diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetails.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetails.tsx
index 4f461c23d6..ae91f6f579 100644
--- a/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetails.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetails.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useDispatch } from 'react-redux';
 import { useAlerts, LoadingState, ClusterWizardStep, ErrorState } from '../../../common';
 import { usePullSecret } from '../../hooks';
@@ -11,7 +11,6 @@ import { useManagedDomains, useUsedClusterNames } from '../../hooks';
 import { useOpenshiftVersionsContext } from './OpenshiftVersionsContext';
 import ClusterDetailsForm from './ClusterDetailsForm';
 import ClusterWizardNavigation from './ClusterWizardNavigation';
-import { routeBasePath } from '../../config';
 import {
   ClusterDetailsUpdateParams,
   ClustersService,
@@ -29,7 +28,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
   const clusterWizardContext = useClusterWizardContext();
   const managedDomains = useManagedDomains();
   const { addAlert, clearAlerts } = useAlerts();
-  const history = useHistory();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const { usedClusterNames } = useUsedClusterNames(cluster?.id || '');
   const pullSecret = usePullSecret();
@@ -74,7 +73,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
       clearAlerts();
       try {
         const cluster = await ClustersService.create(params);
-        history.push(`${routeBasePath}/clusters/${cluster.id}`, ClusterWizardFlowStateNew);
+        navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
         await UISettingService.update(cluster.id, { addCustomManifests });
       } catch (e) {
         handleApiError(e, () =>
@@ -85,7 +84,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         }
       }
     },
-    [clearAlerts, history, addAlert, dispatch],
+    [clearAlerts, navigate, addAlert, dispatch],
   );
 
   const navigation = <ClusterWizardNavigation cluster={cluster} />;
diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx
index ebd255bef4..9ee39a528b 100644
--- a/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { Grid, GridItem } from '@patternfly/react-core';
 import isUndefined from 'lodash-es/isUndefined.js';
 import { Formik, FormikHelpers } from 'formik';
diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx
index 514e2f5ce5..d4e16fcc23 100644
--- a/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { ClusterWizardContextType, ClusterWizardContext } from './ClusterWizardContext';
 import {
   ClusterWizardFlowStateType,
@@ -91,7 +91,8 @@ const ClusterWizardContextProvider = ({
   const [wizardStepIds, setWizardStepIds] = React.useState<ClusterWizardStepsType[]>();
   const [wizardPerPage, setWizardPerPage] = React.useState(10);
   const [customManifestsStep, setCustomManifestsStep] = React.useState<boolean>(false);
-  const { state: locationState } = useLocation<ClusterWizardFlowStateType>();
+  const location = useLocation();
+  const locationState = location.state as ClusterWizardFlowStateType | undefined;
   const {
     uiSettings,
     updateUISettings,
diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx
index 7401b19285..d0027b2dba 100644
--- a/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { Alert, AlertGroup, AlertVariant } from '@patternfly/react-core';
 import {
   WizardFooter,
@@ -9,7 +9,6 @@ import {
   clusterFieldLabels,
   selectClusterValidationsInfo,
 } from '../../../common';
-import { routeBasePath } from '../../config';
 import { wizardStepsValidationsMap } from './wizardTransition';
 import { useClusterWizardContext } from './ClusterWizardContext';
 import ClusterWizardStepValidationsAlert from '../../../common/components/clusterWizard/ClusterWizardStepValidationsAlert';
@@ -80,12 +79,9 @@ const ClusterWizardFooter = ({
   ...rest
 }: ClusterWizardFooterProps) => {
   const { alerts } = useAlerts();
-  const history = useHistory();
+  const navigate = useNavigate();
 
-  const handleCancel = React.useCallback(
-    () => history.push(`${routeBasePath}/clusters/`),
-    [history],
-  );
+  const handleCancel = React.useCallback(() => navigate('..'), [navigate]);
 
   const alertsSection = alerts.length ? <Alerts /> : undefined;
 
diff --git a/libs/ui-lib/lib/ocm/components/clusterWizard/Operators.tsx b/libs/ui-lib/lib/ocm/components/clusterWizard/Operators.tsx
index 425eadc233..7eae861628 100644
--- a/libs/ui-lib/lib/ocm/components/clusterWizard/Operators.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterWizard/Operators.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { Formik, FormikConfig, useFormikContext } from 'formik';
 import {
   ClusterWizardStep,
@@ -42,7 +42,7 @@ const OperatorsForm = ({ cluster }: { cluster: Cluster }) => {
   const clusterWizardContext = useClusterWizardContext();
   const isAutoSaveRunning = useFormikAutoSave();
   const { errors, touched, isSubmitting, isValid } = useFormikContext<OperatorsValues>();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { pathname } = useLocation();
 
   const isNextDisabled =
@@ -54,7 +54,7 @@ const OperatorsForm = ({ cluster }: { cluster: Cluster }) => {
 
   const handleNext = () => {
     if (window.location.pathname.indexOf('assisted-installer') > -1) {
-      history.replace(pathname, undefined);
+      navigate(pathname, { state: undefined, replace: true });
     }
     clusterWizardContext.moveNext();
   };
diff --git a/libs/ui-lib/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx b/libs/ui-lib/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx
index 711e2e5aef..c709c4dac2 100644
--- a/libs/ui-lib/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx
@@ -5,8 +5,7 @@ import {
   BreadcrumbItem,
   PageSection,
 } from '@patternfly/react-core';
-import { Link } from 'react-router-dom';
-import { routeBasePath } from '../../config';
+import { Link } from 'react-router-dom-v5-compat';
 import { isInOcm } from '../../../common/api';
 
 const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => (
@@ -16,9 +15,9 @@ const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => (
         <BreadcrumbItem render={() => <Link to={'/'}>Clusters</Link>} />
 
         {clusterName ? (
-          <BreadcrumbItem
-            render={() => <Link to={`${routeBasePath}/clusters`}>Assisted Clusters</Link>}
-          />
+          <BreadcrumbItem>
+            <Link to={`..`}>Assisted Clusters</Link>
+          </BreadcrumbItem>
         ) : (
           <BreadcrumbItem isActive>Assisted Clusters</BreadcrumbItem>
         )}
diff --git a/libs/ui-lib/lib/ocm/components/clusters/ClusterPage.tsx b/libs/ui-lib/lib/ocm/components/clusters/ClusterPage.tsx
index 6560b04be3..2d510deec5 100644
--- a/libs/ui-lib/lib/ocm/components/clusters/ClusterPage.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusters/ClusterPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { useParams, Navigate } from 'react-router-dom-v5-compat';
 import { useDispatch } from 'react-redux';
 import { PageSection, PageSectionVariants, Text, TextContent } from '@patternfly/react-core';
 import {
@@ -35,13 +35,12 @@ import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-
 import { AssistedInstallerHeader } from './AssistedInstallerHeader';
 import { OpenshiftVersionsContextProvider } from '../clusterWizard/OpenshiftVersionsContext';
 
-type MatchParams = {
-  clusterId: string;
-};
-
-const ClusterPageGeneric: React.FC<{ clusterId: string; showBreadcrumbs?: boolean }> = ({
+const ClusterPageGeneric = ({
   clusterId,
   showBreadcrumbs = false,
+}: {
+  clusterId: string;
+  showBreadcrumbs?: boolean;
 }) => {
   if (!clusterId) {
     // console.error('ClusterPageGeneric: missing clusterId');
@@ -132,7 +131,7 @@ const ClusterPageGeneric: React.FC<{ clusterId: string; showBreadcrumbs?: boolea
 
   if (uiState === ResourceUIState.POLLING_ERROR && !cluster) {
     if (Number(errorDetail?.code) === 404) {
-      return <Redirect to={`${routeBasePath}/clusters`} />;
+      return <Navigate to={`${routeBasePath}/clusters`} />;
     }
     return (
       <PageSection variant={PageSectionVariants.light} isFilled>
@@ -141,7 +140,7 @@ const ClusterPageGeneric: React.FC<{ clusterId: string; showBreadcrumbs?: boolea
           fetchData={
             Number(errorDetail?.code) === 401 ? () => window.location.reload() : fetchCluster
           }
-          actions={[<BackButton key={'cancel'} to={`${routeBasePath}/clusters`} />]}
+          actions={[<BackButton key={'cancel'} to={'..'} />]}
         />
       </PageSection>
     );
@@ -152,7 +151,7 @@ const ClusterPageGeneric: React.FC<{ clusterId: string; showBreadcrumbs?: boolea
       <PageSection variant={PageSectionVariants.light} isFilled>
         <ErrorState
           title="Cluster details not found"
-          actions={[<BackButton key={'cancel'} to={`${routeBasePath}/clusters`} />]}
+          actions={[<BackButton key={'cancel'} to={`..`} />]}
           content={
             'Check to make sure the cluster-ID is valid. Otherwise, the cluster details may have been deleted.'
           }
@@ -198,16 +197,20 @@ const ClusterPageGeneric: React.FC<{ clusterId: string; showBreadcrumbs?: boolea
     );
   }
 
-  return <Redirect to="/clusters" />;
+  return <Navigate to="/clusters" />;
 };
 
-export const SingleClusterPage: React.FC<{ clusterId: string }> = ({ clusterId }) => (
+export const SingleClusterPage = ({ clusterId }: { clusterId: string }) => (
   <AlertsContextProvider>
     <ClusterPageGeneric clusterId={clusterId} />
   </AlertsContextProvider>
 );
-export const ClusterPage: React.FC<RouteComponentProps<MatchParams>> = ({ match }) => (
-  <AlertsContextProvider>
-    <ClusterPageGeneric clusterId={match.params.clusterId} showBreadcrumbs />
-  </AlertsContextProvider>
-);
+
+export const ClusterPage = () => {
+  const { clusterId } = useParams<{ clusterId: string }>();
+  return (
+    <AlertsContextProvider>
+      <ClusterPageGeneric clusterId={clusterId || ''} showBreadcrumbs />
+    </AlertsContextProvider>
+  );
+};
diff --git a/libs/ui-lib/lib/ocm/components/clusters/ClusterPageErrors.tsx b/libs/ui-lib/lib/ocm/components/clusters/ClusterPageErrors.tsx
index 0a2f1ed512..b92358111d 100644
--- a/libs/ui-lib/lib/ocm/components/clusters/ClusterPageErrors.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusters/ClusterPageErrors.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
 import { PageSection, PageSectionVariants } from '@patternfly/react-core';
 import { ErrorState } from '../../../common';
-import { routeBasePath } from '../../config';
 import { BackButton } from '../ui/Buttons/BackButton';
 
 export const ClusterUiError = () => (
   <PageSection variant={PageSectionVariants.light} isFilled>
     <ErrorState
       title="Failed to retrieve the default configuration"
-      actions={[<BackButton key={'cancel'} to={`${routeBasePath}/clusters`} />]}
+      actions={[<BackButton key={'cancel'} to={'..'} />]}
     />
   </PageSection>
 );
diff --git a/libs/ui-lib/lib/ocm/components/clusters/Clusters.tsx b/libs/ui-lib/lib/ocm/components/clusters/Clusters.tsx
index f1ad8141d2..b794f54db0 100644
--- a/libs/ui-lib/lib/ocm/components/clusters/Clusters.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusters/Clusters.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import {
   Button,
   ButtonVariant,
@@ -22,7 +22,6 @@ import ClustersTable from './ClustersTable';
 import { fetchClustersAsync, deleteCluster } from '../../store/slices/clusters/slice';
 import { handleApiError, getApiErrorMessage } from '../../../common/api';
 import ClusterBreadcrumbs from './ClusterBreadcrumbs';
-import { routeBasePath } from '../../config';
 import { ClustersService } from '../../services';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import ClusterPollingErrorModal from '../clusterDetail/ClusterPollingErrorModal';
@@ -33,9 +32,8 @@ import {
   selectClusterTableRows,
 } from '../../store/slices/clusters/selectors';
 
-type ClustersProps = RouteComponentProps;
-
-const Clusters: React.FC<ClustersProps> = ({ history }) => {
+const Clusters = () => {
+  const navigate = useNavigate();
   const { LOADING, EMPTY, POLLING_ERROR, RELOADING } = ResourceUIState;
   const { addAlert } = useAlerts();
   const { t } = useTranslation();
@@ -85,7 +83,7 @@ const Clusters: React.FC<ClustersProps> = ({ history }) => {
             primaryAction={
               <Button
                 variant={ButtonVariant.primary}
-                onClick={() => history.push(`${routeBasePath}/clusters/~new`)}
+                onClick={() => navigate(`~new`)}
                 id="empty-state-new-cluster-button"
                 data-ouia-id="button-create-new-cluster"
               >
@@ -129,9 +127,9 @@ const Clusters: React.FC<ClustersProps> = ({ history }) => {
   }
 };
 
-const ClustersPage: React.FC<RouteComponentProps> = (props) => (
+const ClustersPage = () => (
   <AlertsContextProvider>
-    <Clusters {...props} />
+    <Clusters />
   </AlertsContextProvider>
 );
 
diff --git a/libs/ui-lib/lib/ocm/components/clusters/ClustersListToolbar.tsx b/libs/ui-lib/lib/ocm/components/clusters/ClustersListToolbar.tsx
index f6f1f1c784..ccc65ac545 100644
--- a/libs/ui-lib/lib/ocm/components/clusters/ClustersListToolbar.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusters/ClustersListToolbar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import {
   Toolbar,
   ToolbarItem,
@@ -22,7 +22,6 @@ import { SyncIcon } from '@patternfly/react-icons/dist/js/icons/sync-icon';
 import { clusterStatusLabels, isSelectEventChecked, ToolbarButton } from '../../../common';
 import { ResourceUIState } from '../../../common';
 import { fetchClustersAsync } from '../../store/slices/clusters/slice';
-import { routeBasePath } from '../../config';
 import omit from 'lodash-es/omit.js';
 import { TFunction } from 'i18next';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -51,7 +50,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
   setFilters,
 }) => {
   const [isStatusExpanded, setStatusExpanded] = React.useState(false);
-  const history = useHistory();
+  const navigate = useNavigate();
   const clustersUIState = useSelectorDay1(selectClustersUIState);
   const dispatch = useDispatchDay1();
   const fetchClusters = React.useCallback(() => void dispatch(fetchClustersAsync()), [dispatch]);
@@ -154,7 +153,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
         </ToolbarFilter>
         <ToolbarButton
           variant={ButtonVariant.primary}
-          onClick={() => history.push(`${routeBasePath}/clusters/~new`)}
+          onClick={() => navigate(`~new`)}
           id="button-create-new-cluster"
           data-ouia-id="button-create-new-cluster"
         >
diff --git a/libs/ui-lib/lib/ocm/components/clusters/NewClusterPage.tsx b/libs/ui-lib/lib/ocm/components/clusters/NewClusterPage.tsx
index f93b83470c..3c6eea3cbe 100644
--- a/libs/ui-lib/lib/ocm/components/clusters/NewClusterPage.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusters/NewClusterPage.tsx
@@ -13,9 +13,7 @@ import { AssistedInstallerHeader } from './AssistedInstallerHeader';
 import { ModalDialogsContextProvider } from '../hosts/ModalDialogsContext';
 import { OpenshiftVersionsContextProvider } from '../clusterWizard/OpenshiftVersionsContext';
 
-const NewClusterPageGeneric: React.FC<{ pageTitleSection?: ReactNode }> = ({
-  pageTitleSection,
-}) => {
+const NewClusterPageGeneric = ({ pageTitleSection }: { pageTitleSection?: ReactNode }) => {
   return (
     <AlertsContextProvider>
       <SentryErrorMonitorContextProvider>
@@ -41,7 +39,7 @@ const NewClusterPageGeneric: React.FC<{ pageTitleSection?: ReactNode }> = ({
   );
 };
 
-const NewClusterTitleSection: React.FC = () => (
+const NewClusterTitleSection = () => (
   <>
     <ClusterBreadcrumbs clusterName="New cluster" />
     <PageSection variant={PageSectionVariants.light}>
@@ -50,7 +48,7 @@ const NewClusterTitleSection: React.FC = () => (
   </>
 );
 
-export const NewSingleClusterPage: React.FC = () => <NewClusterPageGeneric />;
-export const NewClusterPage: React.FC = () => (
+export const NewSingleClusterPage = () => <NewClusterPageGeneric />;
+export const NewClusterPage = () => (
   <NewClusterPageGeneric pageTitleSection={<NewClusterTitleSection />} />
 );
diff --git a/libs/ui-lib/lib/ocm/components/ui/Buttons/BackButton.tsx b/libs/ui-lib/lib/ocm/components/ui/Buttons/BackButton.tsx
index 35bbf58edb..d6000b35e6 100644
--- a/libs/ui-lib/lib/ocm/components/ui/Buttons/BackButton.tsx
+++ b/libs/ui-lib/lib/ocm/components/ui/Buttons/BackButton.tsx
@@ -1,12 +1,10 @@
-import { Link } from 'react-router-dom';
-import type { LinkProps } from 'react-router-dom';
-import type { LocationState } from 'history';
+import { Link, LinkProps } from 'react-router-dom-v5-compat';
 import type { ButtonProps } from '@patternfly/react-core';
 import { Button } from '@patternfly/react-core';
 import React from 'react';
 
 export type BackButtonProps = {
-  to: LinkProps<LocationState>['to'];
+  to: LinkProps['to'];
   variant?: ButtonProps['variant'];
 };
 export const BackButton = ({ to, variant = 'secondary' }: BackButtonProps) => (
diff --git a/libs/ui-lib/lib/ocm/components/ui/RedirectToCluster.tsx b/libs/ui-lib/lib/ocm/components/ui/RedirectToCluster.tsx
deleted file mode 100644
index 1167c2dad6..0000000000
--- a/libs/ui-lib/lib/ocm/components/ui/RedirectToCluster.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Redirect } from 'react-router-dom';
-import { History } from 'history';
-import { routeBasePath } from '../../config';
-
-export const redirectToCluster = (history: History, id: string) => {
-  history.push(`${routeBasePath}/clusters/${id}`);
-};
-
-const RedirectToCluster: React.FC<{ id: string }> = ({ id }) => (
-  <Redirect to={`${routeBasePath}/clusters/${id}`} />
-);
-
-export default RedirectToCluster;
diff --git a/libs/ui-lib/lib/ocm/config/constants.ts b/libs/ui-lib/lib/ocm/config/constants.ts
index 1f7392b32a..64c4dbaaae 100644
--- a/libs/ui-lib/lib/ocm/config/constants.ts
+++ b/libs/ui-lib/lib/ocm/config/constants.ts
@@ -39,5 +39,3 @@ export const ocmPermissionsToAIPermissions = (
   }
   return permissions;
 };
-
-export const OCM_CLUSTER_LIST_LINK = '/openshift'; // TODO(mlibra): Tweak it!!!
diff --git a/libs/ui-lib/lib/ocm/store/slices/clusters/selectors.tsx b/libs/ui-lib/lib/ocm/store/slices/clusters/selectors.tsx
index 149efa42b5..1f79743431 100644
--- a/libs/ui-lib/lib/ocm/store/slices/clusters/selectors.tsx
+++ b/libs/ui-lib/lib/ocm/store/slices/clusters/selectors.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { createSelector } from '@reduxjs/toolkit';
 import type { IRow, IRowData } from '@patternfly/react-table';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import type { TFunction } from 'i18next';
 import {
   DASH,
@@ -14,7 +14,6 @@ import {
 } from '../../../../common';
 import type { ClusterTableRows, HumanizedSortable } from '../../../../common';
 import ClusterStatus, { getClusterStatusText } from '../../../components/clusters/ClusterStatus';
-import { routeBasePath } from '../../../config';
 import { RootStateDay1 } from '../../store-day1';
 import type { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
@@ -53,7 +52,7 @@ const clusterToClusterTableRow = (cluster: Cluster, t: TFunction): IRow => {
     cells: [
       {
         title: (
-          <Link key={name} to={`${routeBasePath}/clusters/${id}`} id={`cluster-link-${id}`}>
+          <Link key={name} to={id} id={`cluster-link-${id}`}>
             {name}
           </Link>
         ),
diff --git a/libs/ui-lib/package.json b/libs/ui-lib/package.json
index fc41570316..32264c50b4 100644
--- a/libs/ui-lib/package.json
+++ b/libs/ui-lib/package.json
@@ -47,7 +47,6 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-measure": "^2.0.8",
     "@types/react-redux": "^7.1.7",
-    "@types/react-router-dom": "^5.3.0",
     "@types/react-tagsinput": "^3.19.7",
     "@types/uuid": "^8.0.0"
   },
@@ -102,7 +101,7 @@
     "react-i18next": ">11.7.3",
     "react-monaco-editor": "^0.55.0",
     "react-redux": "^8.0.5",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom-v5-compat": "^6.21.2",
     "react-tagsinput": "^3.20",
     "redux": "^4",
     "uuid": "^8.1",
diff --git a/yarn.lock b/yarn.lock
index 9ae342609c..82617a55d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -41,7 +41,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.19.0, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.19.0, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.9.2":
   version: 7.24.4
   resolution: "@babel/runtime@npm:7.24.4"
   dependencies:
@@ -50,6 +50,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.12.13":
+  version: 7.24.7
+  resolution: "@babel/runtime@npm:7.24.7"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: d17f29eed6f848ac15cdf4202a910b741facfb0419a9d79e5c7fa37df6362fc3227f1cc2e248cc6db5e53ddffb4caa6686c488e6e80ce3d29c36a4e74c8734ea
+  languageName: node
+  linkType: hard
+
 "@colors/colors@npm:1.5.0":
   version: 1.5.0
   resolution: "@colors/colors@npm:1.5.0"
@@ -752,7 +761,6 @@ __metadata:
     "@sentry/browser": ^5.9 || ^6
     "@tsconfig/vite-react": ^1.0.1
     "@types/react": 17.0.x
-    "@types/react-router-dom": ^5.3.3
     "@vitejs/plugin-react-swc": ^3.0.1
     axios: ">=0.22.0 <2.0.0"
     i18next: ^20.4.0
@@ -765,6 +773,7 @@ __metadata:
     react-monaco-editor: ^0.55.0
     react-redux: ^8.0.5
     react-router-dom: ^5.3.3
+    react-router-dom-v5-compat: ^6.21.2
     react-tagsinput: ^3.20
     redux: ^4
     uuid: ^8.1
@@ -873,7 +882,6 @@ __metadata:
     "@types/react-dom": ^18.3.0
     "@types/react-measure": ^2.0.8
     "@types/react-redux": ^7.1.7
-    "@types/react-router-dom": ^5.3.0
     "@types/react-tagsinput": ^3.19.7
     "@types/uuid": ^8.0.0
     axios-case-converter: ^0.11.1
@@ -908,7 +916,7 @@ __metadata:
     react-i18next: ">11.7.3"
     react-monaco-editor: ^0.55.0
     react-redux: ^8.0.5
-    react-router-dom: ^5.3.0
+    react-router-dom-v5-compat: ^6.21.2
     react-tagsinput: ^3.20
     redux: ^4
     uuid: ^8.1
@@ -1172,6 +1180,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@remix-run/router@npm:1.15.3":
+  version: 1.15.3
+  resolution: "@remix-run/router@npm:1.15.3"
+  checksum: 9e70bd334d99fdf9285f0885c10353d7e25f66369080f551d997e3ce204e1af3a12d6f12b091f94a2dc9a54c80598bbe3c5194b57cbae17b7b40ab815dcd49a0
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-android-arm-eabi@npm:4.16.4":
   version: 4.16.4
   resolution: "@rollup/rollup-android-arm-eabi@npm:4.16.4"
@@ -1625,13 +1640,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/history@npm:^4.7.11":
-  version: 4.7.11
-  resolution: "@types/history@npm:4.7.11"
-  checksum: c92e2ba407dcab0581a9afdf98f533aa41b61a71133420a6d92b1ca9839f741ab1f9395b17454ba5b88cb86020b70b22d74a1950ccfbdfd9beeaa5459fdc3464
-  languageName: node
-  linkType: hard
-
 "@types/hoist-non-react-statics@npm:^3.3.0, @types/hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.5
   resolution: "@types/hoist-non-react-statics@npm:3.3.5"
@@ -1801,27 +1809,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-router-dom@npm:^5.3.0, @types/react-router-dom@npm:^5.3.3":
-  version: 5.3.3
-  resolution: "@types/react-router-dom@npm:5.3.3"
-  dependencies:
-    "@types/history": ^4.7.11
-    "@types/react": "*"
-    "@types/react-router": "*"
-  checksum: 28c4ea48909803c414bf5a08502acbb8ba414669b4b43bb51297c05fe5addc4df0b8fd00e0a9d1e3535ec4073ef38aaafac2c4a2b95b787167d113bc059beff3
-  languageName: node
-  linkType: hard
-
-"@types/react-router@npm:*":
-  version: 5.1.20
-  resolution: "@types/react-router@npm:5.1.20"
-  dependencies:
-    "@types/history": ^4.7.11
-    "@types/react": "*"
-  checksum: 128764143473a5e9457ddc715436b5d49814b1c214dde48939b9bef23f0e77f52ffcdfa97eb8d3cc27e2c229869c0cdd90f637d887b62f2c9f065a87d6425419
-  languageName: node
-  linkType: hard
-
 "@types/react-tagsinput@npm:^3.19.7":
   version: 3.20.6
   resolution: "@types/react-tagsinput@npm:3.20.6"
@@ -5412,6 +5399,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"history@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "history@npm:5.3.0"
+  dependencies:
+    "@babel/runtime": ^7.7.6
+  checksum: d73c35df49d19ac172f9547d30a21a26793e83f16a78386d99583b5bf1429cc980799fcf1827eb215d31816a6600684fba9686ce78104e23bd89ec239e7c726f
+  languageName: node
+  linkType: hard
+
 "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"
@@ -7876,6 +7872,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router-dom-v5-compat@npm:^6.21.2":
+  version: 6.22.3
+  resolution: "react-router-dom-v5-compat@npm:6.22.3"
+  dependencies:
+    history: ^5.3.0
+    react-router: 6.22.3
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+    react-router-dom: 4 || 5
+  checksum: 7ef41e2a67de60d5dbae423ca4c4bcc364f0fb100dc35ceeeb27dd33f58c580f63cb78f7e26065bc3ea5a200a919014690f1bb625f0b15a060e0bc2a2e8c7d8e
+  languageName: node
+  linkType: hard
+
 "react-router-dom@npm:5.2.0":
   version: 5.2.0
   resolution: "react-router-dom@npm:5.2.0"
@@ -7949,6 +7959,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router@npm:6.22.3":
+  version: 6.22.3
+  resolution: "react-router@npm:6.22.3"
+  dependencies:
+    "@remix-run/router": 1.15.3
+  peerDependencies:
+    react: ">=16.8"
+  checksum: 1f7d9a5a849761ff69ef8f3d3131b4c1c25d18b76317ba5ad6f0d9421192c0b8b71ab0cc818c57aad7b81ada725559e513307d0ab43296a460262f0358602672
+  languageName: node
+  linkType: hard
+
 "react-side-effect@npm:^2.1.0":
   version: 2.1.2
   resolution: "react-side-effect@npm:2.1.2"