diff --git a/apps/assisted-ui/package.json b/apps/assisted-ui/package.json
index 2be10baf80..4125a26d79 100644
--- a/apps/assisted-ui/package.json
+++ b/apps/assisted-ui/package.json
@@ -22,6 +22,7 @@
     "react-monaco-editor": "^0.51.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",
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 b452768318..b586e9d321 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 3f3d0d8733..1fe1659e23 100644
--- a/libs/ui-lib/lib/cim/components/InfraEnv/AddHostDropdown.tsx
+++ b/libs/ui-lib/lib/cim/components/InfraEnv/AddHostDropdown.tsx
@@ -16,7 +16,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 03bc2e7b18..9a8ca27059 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 fe136a5bec..de25497605 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,
   Title,
 } from '@patternfly/react-core';
-import { HostsClusterDetailTabProps } from './types';
 import {
   OcmCpuArchitecture,
   STANDALONE_DEPLOYMENT_ENABLED_FEATURES,
@@ -43,9 +41,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..3461c3918a 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 ae3704131a..e7dcc6bb2c 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,
@@ -62,7 +61,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}
         />
       </CardBody>
@@ -80,7 +79,7 @@ const LoadingDefaultConfigFailedCard = () => (
     <CardBody>
       <ErrorState
         title="Failed to retrieve the default configuration"
-        actions={[<BackButton key={'cancel'} to={OCM_CLUSTER_LIST_LINK} />]}
+        actions={[<BackButton key={'cancel'} to={'..'} />]}
       />
     </CardBody>
   </Card>
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 e692060179..df2a1cd709 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';
@@ -10,7 +10,6 @@ import { canNextClusterDetails, ClusterWizardFlowStateNew } from './wizardTransi
 import { useOpenshiftVersions, useManagedDomains, useUsedClusterNames } from '../../hooks';
 import ClusterDetailsForm from './ClusterDetailsForm';
 import ClusterWizardNavigation from './ClusterWizardNavigation';
-import { routeBasePath } from '../../config';
 import {
   ClusterDetailsUpdateParams,
   ClustersService,
@@ -28,7 +27,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();
@@ -69,7 +68,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, () =>
@@ -80,7 +79,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 73a80f55c1..b8e2fda41c 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 cee3c9e240..3db5c1c43b 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';
@@ -79,12 +78,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 6675783cab..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 =
@@ -53,7 +53,9 @@ const OperatorsForm = ({ cluster }: { cluster: Cluster }) => {
     !canNextOperators({ cluster });
 
   const handleNext = () => {
-    history.replace(pathname, undefined);
+    if (window.location.pathname.indexOf('assisted-installer') > -1) {
+      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 e2a9090866..9b835cf4c0 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 }) => (
@@ -18,7 +17,7 @@ const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => (
         </BreadcrumbItem>
         {clusterName ? (
           <BreadcrumbItem>
-            <Link to={`${routeBasePath}/clusters`}>Assisted Clusters</Link>
+            <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 629954e6af..badc3c7691 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 {
@@ -34,13 +34,12 @@ import { usePullSecret } from '../../hooks';
 import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 import { AssistedInstallerHeader } from './AssistedInstallerHeader';
 
-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');
@@ -129,7 +128,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>
@@ -138,7 +137,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>
     );
@@ -149,7 +148,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.'
           }
@@ -193,16 +192,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 2829564235..23c5760902 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,
@@ -23,7 +23,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';
@@ -52,7 +51,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]);
@@ -153,7 +152,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 dae0a1acbe..2ba276df0f 100644
--- a/libs/ui-lib/lib/ocm/components/clusters/NewClusterPage.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusters/NewClusterPage.tsx
@@ -11,9 +11,7 @@ import { ClusterUiError } from './ClusterPageErrors';
 import { NewFeatureSupportLevelProvider } from '../featureSupportLevels';
 import { AssistedInstallerHeader } from './AssistedInstallerHeader';
 
-const NewClusterPageGeneric: React.FC<{ pageTitleSection?: ReactNode }> = ({
-  pageTitleSection,
-}) => {
+const NewClusterPageGeneric = ({ pageTitleSection }: { pageTitleSection?: ReactNode }) => {
   return (
     <AlertsContextProvider>
       <SentryErrorMonitorContextProvider>
@@ -35,7 +33,7 @@ const NewClusterPageGeneric: React.FC<{ pageTitleSection?: ReactNode }> = ({
   );
 };
 
-const NewClusterTitleSection: React.FC = () => (
+const NewClusterTitleSection = () => (
   <>
     <ClusterBreadcrumbs clusterName="New cluster" />
     <PageSection variant={PageSectionVariants.light}>
@@ -44,7 +42,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 1d15371dc9..baa48dcbef 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/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 388e4215a4..886975349a 100644
--- a/libs/ui-lib/package.json
+++ b/libs/ui-lib/package.json
@@ -103,7 +103,7 @@
     "react-i18next": ">11.7.3",
     "react-monaco-editor": "^0.51.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 06596b261d..7e9e5f77a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -50,6 +50,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.7.6":
+  version: 7.24.4
+  resolution: "@babel/runtime@npm:7.24.4"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: 2f27d4c0ffac7ae7999ac0385e1106f2a06992a8bdcbf3da06adcac7413863cd08c198c2e4e970041bbea849e17f02e1df18875539b6afba76c781b6b59a07c3
+  languageName: node
+  linkType: hard
+
 "@colors/colors@npm:1.5.0":
   version: 1.5.0
   resolution: "@colors/colors@npm:1.5.0"
@@ -743,6 +752,7 @@ __metadata:
     react-monaco-editor: ^0.51.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
@@ -887,7 +897,7 @@ __metadata:
     react-i18next: ">11.7.3"
     react-monaco-editor: ^0.51.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
@@ -1069,6 +1079,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
+
 "@sentry/browser@npm:^5.9 || ^6":
   version: 6.19.7
   resolution: "@sentry/browser@npm:6.19.7"
@@ -5139,6 +5156,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"
@@ -7670,6 +7696,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"
@@ -7743,6 +7783,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"