Replace 'useHistory' with React Router v6 APIs (#3115)

src/PageNav.tsx

@@ -1,5 +1,6 @@
 import { FormEvent, FunctionComponent } from "react";
-import { NavLink, useHistory, useRouteMatch } from "react-router-dom";
+import { NavLink, useRouteMatch } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   Nav,
@@ -20,8 +21,8 @@ export const PageNav: FunctionComponent = () => {
   const { t } = useTranslation("common");
   const { hasAccess, hasSomeAccess } = useAccess();
   const { realm } = useRealm();
-
+  const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   type SelectedItem = {
     groupId: number | string;
@@ -31,7 +32,7 @@ export const PageNav: FunctionComponent = () => {
   };
 
   const onSelect = (item: SelectedItem) => {
-    history.push(item.to);
+    navigate(item.to);
     item.event.preventDefault();
   };
 
@@ -52,7 +53,7 @@ export const PageNav: FunctionComponent = () => {
     }
 
     //remove "/realm-name" from the start of the path
-    const activeItem = history.location.pathname.substring(realm.length + 1);
+    const activeItem = location.pathname.substring(realm.length + 1);
     return (
       <li>
         <NavLink

src/authentication/FlowDetails.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { useHistory, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { Trans, useTranslation } from "react-i18next";
 import {
   DataList,
@@ -59,7 +60,7 @@ export default function FlowDetails() {
   const { realm } = useRealm();
   const { addAlert, addError } = useAlerts();
   const { id, usedBy, builtIn } = useParams<FlowParams>();
-  const history = useHistory();
+  const navigate = useNavigate();
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
 
@@ -222,7 +223,7 @@ export default function FlowDetails() {
         await adminClient.authenticationManagement.deleteFlow({
           flowId: flow!.id!,
         });
-        history.push(toAuthentication({ realm }));
+        navigate(toAuthentication({ realm }));
         addAlert(t("deleteFlowSuccess"), AlertVariant.success);
       } catch (error) {
         addError("authentication:deleteFlowError", error);

src/authentication/form/CreateFlow.tsx

@@ -1,4 +1,5 @@
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { FormProvider, useForm } from "react-hook-form";
 import {
@@ -21,7 +22,7 @@ import { toAuthentication } from "../routes/Authentication";
 
 export default function CreateFlow() {
   const { t } = useTranslation("authentication");
-  const history = useHistory();
+  const navigate = useNavigate();
   const { realm } = useRealm();
   const form = useForm<AuthenticationFlowRepresentation>({
     defaultValues: { builtIn: false, topLevel: true },
@@ -37,7 +38,7 @@ export default function CreateFlow() {
         flow
       );
       addAlert(t("flowCreatedSuccess"), AlertVariant.success);
-      history.push(
+      navigate(
         toFlow({
           realm,
           id: id!,

src/client-scopes/details/MappingDetails.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory, useParams, useRouteMatch } from "react-router-dom";
+import { Link, useParams, useRouteMatch } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { FormProvider, useForm } from "react-hook-form";
 import {
@@ -45,7 +46,7 @@ export default function MappingDetails() {
     protocolMapper?: string;
   }>();
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const { realm } = useRealm();
   const serverInfo = useServerInfo();
   const isGuid = /^[{]?[0-9a-fA-F]{8}-([0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}[}]?$/;
@@ -142,7 +143,7 @@ export default function MappingDetails() {
           });
         }
         addAlert(t("common:mappingDeletedSuccess"), AlertVariant.success);
-        history.push(toDetails());
+        navigate(toDetails());
       } catch (error) {
         addError("common:mappingDeletedError", error);
       }

src/client-scopes/form/ClientScopeForm.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   AlertVariant,
@@ -40,6 +41,7 @@ export default function ClientScopeForm() {
   const [clientScope, setClientScope] =
     useState<ClientScopeDefaultOptionalType>();
   const history = useHistory();
+  const navigate = useNavigate();
   const { realm } = useRealm();
 
   const { adminClient } = useAdminClient();
@@ -97,7 +99,7 @@ export default function ClientScopeForm() {
           { ...clientScopes, id: scope.id },
           clientScopes.type
         );
-        history.push(
+        navigate(
           toClientScope({
             realm,
             id: scope.id!,
@@ -166,7 +168,7 @@ export default function ClientScopeForm() {
   ): Promise<void> => {
     if (!Array.isArray(mappers)) {
       const mapper = mappers as ProtocolMapperTypeRepresentation;
-      history.push(
+      navigate(
         toMapper({
           realm,
           id: clientScope!.id!,

src/clients/ClientDetails.tsx

@@ -17,6 +17,7 @@ import { useMemo, useState } from "react";
 import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useHistory, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useAlerts } from "../components/alert/Alerts";
 import {
   ConfirmDialogModal,
@@ -197,6 +198,7 @@ export default function ClientDetails() {
   const hasViewUsers = hasAccess("view-users");
 
   const history = useHistory();
+  const navigate = useNavigate();
 
   const [downloadDialogOpen, toggleDownloadDialogOpen] = useToggle();
   const [changeAuthenticatorOpen, toggleChangeAuthenticatorOpen] = useToggle();
@@ -227,7 +229,7 @@ export default function ClientDetails() {
       try {
         await adminClient.clients.del({ id: clientId });
         addAlert(t("clientDeletedSuccess"), AlertVariant.success);
-        history.push(toClients({ realm }));
+        navigate(toClients({ realm }));
       } catch (error) {
         addError("clients:clientDeleteError", error);
       }

src/clients/add/NewClientForm.tsx

@@ -10,7 +10,7 @@ import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useAlerts } from "../../components/alert/Alerts";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useAdminClient } from "../../context/auth/AdminClient";
@@ -25,7 +25,7 @@ export default function NewClientForm() {
   const { t } = useTranslation("clients");
   const { realm } = useRealm();
   const { adminClient } = useAdminClient();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [showCapabilityConfig, setShowCapabilityConfig] = useState(false);
   const [client, setClient] = useState<ClientRepresentation>({
@@ -52,9 +52,7 @@ export default function NewClientForm() {
         clientId: client.clientId?.trim(),
       });
       addAlert(t("createSuccess"), AlertVariant.success);
-      history.push(
+      navigate(toClient({ realm, clientId: newClient.id, tab: "settings" }));
-        toClient({ realm, clientId: newClient.id, tab: "settings" })
-      );
     } catch (error) {
       addError("clients:createError", error);
     }
@@ -138,7 +136,7 @@ export default function NewClientForm() {
       <PageSection variant="light">
         <FormProvider {...methods}>
           <Wizard
-            onClose={() => history.push(toClients({ realm }))}
+            onClose={() => navigate(toClients({ realm }))}
             navAriaLabel={`${title} steps`}
             mainAriaLabel={`${title} content`}
             steps={[

src/clients/authorization/EmptyPermissionsState.tsx

@@ -1,4 +1,4 @@
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   EmptyState,
@@ -27,7 +27,7 @@ const EmptyButton = ({
 }: EmptyButtonProps) => {
   const { t } = useTranslation("clients");
   const { realm } = useRealm();
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <Button
       data-testid={`create-${permissionType}`}
@@ -37,7 +37,7 @@ const EmptyButton = ({
       variant="secondary"
       onClick={() =>
         !disabled &&
-        history.push(toNewPermission({ realm, id: clientId, permissionType }))
+        navigate(toNewPermission({ realm, id: clientId, permissionType }))
       }
     >
       {t(`create${toUpperCase(permissionType)}BasedPermission`)}

src/clients/authorization/PermissionDetails.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import {
@@ -46,7 +47,7 @@ export default function PermissionDetails() {
   });
   const { register, control, reset, errors, handleSubmit } = form;
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const { id, realm, permissionType, permissionId, selectedId } = useParams<
     NewPermissionParams & PermissionDetailsParams
   >();
@@ -116,7 +117,7 @@ export default function PermissionDetails() {
           { id, type: permissionType },
           permission
         );
-        history.push(
+        navigate(
           toPermissionDetails({
             realm,
             id,
@@ -149,7 +150,7 @@ export default function PermissionDetails() {
           permissionId: permissionId,
         });
         addAlert(t("permissionDeletedSuccess"), AlertVariant.success);
-        history.push(
+        navigate(
           toAuthorizationTab({ realm, clientId: id, tab: "permissions" })
         );
       } catch (error) {

src/clients/authorization/Permissions.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   AlertVariant,
@@ -52,7 +53,7 @@ type ExpandablePolicyRepresentation = PolicyRepresentation & {
 
 export const AuthorizationPermissions = ({ clientId }: PermissionsProps) => {
   const { t } = useTranslation("clients");
-  const history = useHistory();
+  const navigate = useNavigate();
   const { adminClient } = useAdminClient();
   const { addAlert, addError } = useAlerts();
   const { realm } = useRealm();
@@ -216,7 +217,7 @@ export const AuthorizationPermissions = ({ clientId }: PermissionsProps) => {
                       isDisabled={disabledCreate?.resources}
                       component="button"
                       onClick={() =>
-                        history.push(
+                        navigate(
                           toNewPermission({
                             realm,
                             id: clientId,
@@ -233,7 +234,7 @@ export const AuthorizationPermissions = ({ clientId }: PermissionsProps) => {
                       isDisabled={disabledCreate?.scopes}
                       component="button"
                       onClick={() =>
-                        history.push(
+                        navigate(
                           toNewPermission({
                             realm,
                             id: clientId,

src/clients/authorization/Policies.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   Alert,
@@ -52,7 +53,7 @@ export const AuthorizationPolicies = ({ clientId }: PoliciesProps) => {
   const { adminClient } = useAdminClient();
   const { addAlert, addError } = useAlerts();
   const { realm } = useRealm();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [policies, setPolicies] = useState<ExpandablePolicyRepresentation[]>();
   const [selectedPolicy, setSelectedPolicy] =
@@ -172,7 +173,7 @@ export const AuthorizationPolicies = ({ clientId }: PoliciesProps) => {
             <NewPolicyDialog
               policyProviders={policyProviders}
               onSelect={(p) =>
-                history.push(
+                navigate(
                   toCreatePolicy({ id: clientId, realm, policyType: p.type! })
                 )
               }
@@ -319,7 +320,7 @@ export const AuthorizationPolicies = ({ clientId }: PoliciesProps) => {
                 (p) => p.type !== "aggregate"
               )}
               onSelect={(p) =>
-                history.push(
+                navigate(
                   toCreatePolicy({ id: clientId, realm, policyType: p.type! })
                 )
               }

src/clients/authorization/ResourceDetails.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import {
@@ -57,7 +58,7 @@ export default function ResourceDetails() {
   const { register, errors, control, setValue, handleSubmit } = form;
 
   const { id, resourceId, realm } = useParams<ResourceDetailsParams>();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const setupForm = (resource: ResourceRepresentation = {}) => {
     convertToFormValues(resource, setValue);
@@ -100,7 +101,7 @@ export default function ResourceDetails() {
           { id },
           resource
         );
-        history.push(toResourceDetails({ realm, id, resourceId: result._id! }));
+        navigate(toResourceDetails({ realm, id, resourceId: result._id! }));
       }
       addAlert(
         t((resourceId ? "update" : "create") + "ResourceSuccess"),
@@ -143,9 +144,7 @@ export default function ResourceDetails() {
           resourceId: resourceId!,
         });
         addAlert(t("resourceDeletedSuccess"), AlertVariant.success);
-        history.push(
+        navigate(toAuthorizationTab({ realm, clientId: id, tab: "resources" }));
-          toAuthorizationTab({ realm, clientId: id, tab: "resources" })
-        );
       } catch (error) {
         addError("clients:resourceDeletedError", error);
       }

src/clients/authorization/ScopeDetails.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import {
@@ -28,7 +29,7 @@ import { DeleteScopeDialog } from "./DeleteScopeDialog";
 export default function ScopeDetails() {
   const { t } = useTranslation("clients");
   const { id, scopeId, realm } = useParams<ScopeDetailsParams>();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const { adminClient } = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -81,9 +82,7 @@ export default function ScopeDetails() {
             iconUri: scope.iconUri,
           }
         );
-        history.push(
+        navigate(toAuthorizationTab({ realm, clientId: id, tab: "scopes" }));
-          toAuthorizationTab({ realm, clientId: id, tab: "scopes" })
-        );
       }
       addAlert(
         t((scopeId ? "update" : "create") + "ScopeSuccess"),
@@ -102,9 +101,7 @@ export default function ScopeDetails() {
         toggleDialog={toggleDeleteDialog}
         selectedScope={scope}
         refresh={() =>
-          history.push(
+          navigate(toAuthorizationTab({ realm, clientId: id, tab: "scopes" }))
-            toAuthorizationTab({ realm, clientId: id, tab: "scopes" })
-          )
         }
       />
       <ViewHeader

src/clients/authorization/Scopes.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   Button,
@@ -46,7 +47,7 @@ export type ExpandableScopeRepresentation = ScopeRepresentation & {
 
 export const AuthorizationScopes = ({ clientId }: ScopesProps) => {
   const { t } = useTranslation("clients");
-  const history = useHistory();
+  const navigate = useNavigate();
   const { adminClient } = useAdminClient();
   const { realm } = useRealm();
 
@@ -291,9 +292,7 @@ export const AuthorizationScopes = ({ clientId }: ScopesProps) => {
         <ListEmptyState
           message={t("emptyAuthorizationScopes")}
           instructions={t("emptyAuthorizationInstructions")}
-          onPrimaryAction={() =>
+          onPrimaryAction={() => navigate(toNewScope({ id: clientId, realm }))}
-            history.push(toNewScope({ id: clientId, realm }))
-          }
           primaryActionText={t("createAuthorizationScope")}
         />
       )}

src/clients/authorization/policy/PolicyDetails.tsx

@@ -1,5 +1,6 @@
 import { FunctionComponent, useState } from "react";
-import { Link, useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { FormProvider, useForm } from "react-hook-form";
 import {
@@ -62,7 +63,7 @@ export const isValidComponentType = (value: string) => value in COMPONENTS;
 export default function PolicyDetails() {
   const { t } = useTranslation("clients");
   const { id, realm, policyId, policyType } = useParams<PolicyDetailsParams>();
-  const history = useHistory();
+  const navigate = useNavigate();
   const form = useForm({ shouldUnregister: false });
   const { reset, handleSubmit } = form;
 
@@ -123,7 +124,7 @@ export default function PolicyDetails() {
           { id, type: policyType },
           policy
         );
-        history.push(
+        navigate(
           toPolicyDetails({
             realm,
             id,
@@ -152,9 +153,7 @@ export default function PolicyDetails() {
           policyId,
         });
         addAlert(t("policyDeletedSuccess"), AlertVariant.success);
-        history.push(
+        navigate(toAuthorizationTab({ realm, clientId: id, tab: "policies" }));
-          toAuthorizationTab({ realm, clientId: id, tab: "policies" })
-        );
       } catch (error) {
         addError("clients:policyDeletedError", error);
       }

src/clients/import/ImportForm.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { FormProvider, useForm } from "react-hook-form";
 import {
@@ -35,7 +36,7 @@ const isXml = (text: string) => text.startsWith("<");
 
 export default function ImportForm() {
   const { t } = useTranslation("clients");
-  const history = useHistory();
+  const navigate = useNavigate();
   const { adminClient } = useAdminClient();
   const { realm } = useRealm();
   const form = useForm<ClientRepresentation>({ shouldUnregister: false });
@@ -89,9 +90,7 @@ export default function ImportForm() {
         ...convertFormValuesToObject(client),
       });
       addAlert(t("clientImportSuccess"), AlertVariant.success);
-      history.push(
+      navigate(toClient({ realm, clientId: newClient.id, tab: "settings" }));
-        toClient({ realm, clientId: newClient.id, tab: "settings" })
-      );
     } catch (error) {
       addError("clients:clientImportError", error);
     }

src/clients/initial-access/CreateInitialAccessToken.tsx

@@ -15,7 +15,8 @@ import { FormAccess } from "../../components/form-access/FormAccess";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { TimeSelector } from "../../components/time-selector/TimeSelector";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useAlerts } from "../../components/alert/Alerts";
@@ -34,7 +35,7 @@ export default function CreateInitialAccessToken() {
   const { realm } = useRealm();
   const { addAlert, addError } = useAlerts();
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const [token, setToken] = useState("");
 
   const save = async (clientToken: ClientInitialAccessPresentation) => {
@@ -57,7 +58,7 @@ export default function CreateInitialAccessToken() {
           toggleDialog={() => {
             setToken("");
             addAlert(t("tokenSaveSuccess"), AlertVariant.success);
-            history.push(toClients({ realm, tab: "initial-access-token" }));
+            navigate(toClients({ realm, tab: "initial-access-token" }));
           }}
         />
       )}

src/clients/initial-access/InitialAccessTokenList.tsx

@@ -3,7 +3,8 @@ import { wrappable } from "@patternfly/react-table";
 import type ClientInitialAccessPresentation from "@keycloak/keycloak-admin-client/lib/defs/clientInitialAccessPresentation";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
@@ -21,7 +22,7 @@ export const InitialAccessTokenList = () => {
   const { realm } = useRealm();
   const formatDate = useFormatDate();
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [token, setToken] = useState<ClientInitialAccessPresentation>();
 
@@ -114,7 +115,7 @@ export const InitialAccessTokenList = () => {
             instructions={t("noTokensInstructions")}
             primaryActionText={t("common:create")}
             onPrimaryAction={() =>
-              history.push(toCreateInitialAccessToken({ realm }))
+              navigate(toCreateInitialAccessToken({ realm }))
             }
           />
         }

src/clients/scopes/DedicatedScopes.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   AlertVariant,
@@ -31,6 +32,7 @@ import { DedicatedScope } from "./DecicatedScope";
 export default function DedicatedScopes() {
   const { t } = useTranslation("clients");
   const history = useHistory();
+  const navigate = useNavigate();
   const { realm, clientId } = useParams<DedicatedScopeDetailsParams>();
 
   const { adminClient } = useAdminClient();
@@ -55,7 +57,7 @@ export default function DedicatedScopes() {
   ): Promise<void> => {
     if (!Array.isArray(mappers)) {
       const mapper = mappers as ProtocolMapperTypeRepresentation;
-      history.push(
+      navigate(
         toMapper({
           realm,
           id: client.id!,

src/components/bread-crumb/GroupBreadCrumbs.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useLocation } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core";
 
@@ -10,17 +11,15 @@ export const GroupBreadCrumbs = () => {
   const { t } = useTranslation();
   const { clear, remove, subGroups } = useSubGroups();
   const { realm } = useRealm();
-
-  const history = useHistory();
   const location = useLocation();
 
   useEffect(() => {
-    return history.listen(({ pathname }) => {
+    const { pathname } = location;
+
     if (!pathname.includes("/groups") || pathname.endsWith("/groups")) {
       clear();
     }
-    });
+  }, [location]);
-  }, [history]);
 
   return subGroups.length !== 0 ? (
     <Breadcrumb>

src/components/keycloak-card/KeycloakCard.tsx

@@ -13,7 +13,8 @@ import {
   FlexItem,
 } from "@patternfly/react-core";
 import "./keycloak-card.css";
-import { useHistory, useRouteMatch } from "react-router-dom";
+import { useRouteMatch } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 
 export type KeycloakCardProps = {
   id: string;
@@ -37,7 +38,7 @@ export const KeycloakCard = ({
 }: KeycloakCardProps) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const { url } = useRouteMatch();
 
   const onDropdownToggle = () => {
@@ -49,7 +50,7 @@ export const KeycloakCard = ({
   };
 
   const openSettings = () => {
-    history.push(`${url}/${providerId}/${id}`);
+    navigate(`${url}/${providerId}/${id}`);
   };
 
   return (

src/components/keycloak-tabs/KeycloakTabs.tsx

@@ -1,5 +1,6 @@
 import { Children, isValidElement, useState } from "react";
-import { useHistory, useRouteMatch } from "react-router-dom";
+import { useRouteMatch } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { TabProps, Tabs, TabsProps } from "@patternfly/react-core";
 import { useFormContext } from "react-hook-form";
 import { useConfirmDialog } from "../confirm-dialog/ConfirmDialog";
@@ -29,7 +30,7 @@ export const KeycloakTabs = ({
 }: KeycloakTabsProps) => {
   const match = useRouteMatch();
   const params = match.params as { [index: string]: string };
-  const history = useHistory();
+  const navigate = useNavigate();
   const form = useFormContext() as
     | ReturnType<typeof useFormContext>
     | undefined;
@@ -50,7 +51,7 @@ export const KeycloakTabs = ({
     continueButtonLabel: "common:leave",
     onConfirm: () => {
       form?.reset();
-      history.push(createUrl(path, { ...params, [paramName]: key as string }));
+      navigate(createUrl(path, { ...params, [paramName]: key as string }));
     },
   });
 
@@ -70,7 +71,7 @@ export const KeycloakTabs = ({
             setKey(key as string);
             toggleChangeTabDialog();
           } else {
-            history.push(
+            navigate(
               createUrl(path, { ...params, [paramName]: key as string })
             );
           }

src/components/permission-tab/PermissionTab.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { Trans, useTranslation } from "react-i18next";
 import {
   Card,
@@ -45,7 +46,7 @@ type PermissionsTabProps = {
 
 export const PermissionsTab = ({ id, type }: PermissionsTabProps) => {
   const { t } = useTranslation("common");
-  const history = useHistory();
+  const navigate = useNavigate();
   const { adminClient } = useAdminClient();
   const { realm } = useRealm();
   const [realmId, setRealmId] = useState("");
@@ -219,7 +220,7 @@ export const PermissionsTab = ({ id, type }: PermissionsTabProps) => {
                             {
                               title: t("common:edit"),
                               onClick() {
-                                history.push(
+                                navigate(
                                   toPermissionDetails({
                                     realm,
                                     id: realmId,

src/components/realm-selector/RealmSelector.tsx

@@ -13,7 +13,7 @@ import {
 import { CheckIcon } from "@patternfly/react-icons";
 import { Fragment, ReactElement, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useRealms } from "../../context/RealmsContext";
@@ -31,7 +31,7 @@ export const RealmSelector = () => {
   const { whoAmI } = useWhoAmI();
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
-  const history = useHistory();
+  const navigate = useNavigate();
   const { t } = useTranslation("common");
   const recentUsed = new RecentUsed();
   const all = recentUsed.used
@@ -70,7 +70,7 @@ export const RealmSelector = () => {
       component="div"
       isBlock
       onClick={() => {
-        history.push(toAddRealm({ realm }));
+        navigate(toAddRealm({ realm }));
         setOpen(!open);
       }}
     >
@@ -80,7 +80,7 @@ export const RealmSelector = () => {
 
   const selectRealm = (realm: string) => {
     setOpen(!open);
-    history.push(toDashboard({ realm }));
+    navigate(toDashboard({ realm }));
   };
 
   const dropdownItems = realms.map((r) => (

src/groups/GroupTable.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { cellWidth } from "@patternfly/react-table";
 
@@ -37,7 +38,7 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   const id = getLastId(location.pathname);
 
@@ -63,7 +64,7 @@ export const GroupTable = ({ toggleView }: GroupTableProps) => {
     }
 
     if (!groupsData) {
-      history.push(toGroups({ realm }));
+      navigate(toGroups({ realm }));
     }
 
     return groupsData || [];

src/groups/GroupsSection.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   DropdownItem,
@@ -46,7 +47,7 @@ export default function GroupsSection() {
   const [rename, setRename] = useState<string>();
   const [viewType, setViewType] = useState<ViewType>(ViewType.Table);
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   const id = getLastId(location.pathname);
 
@@ -144,7 +145,7 @@ export default function GroupsSection() {
                   key="deleteGroup"
                   onClick={async () => {
                     await deleteGroup({ id });
-                    history.push(toGroups({ realm }));
+                    navigate(toGroups({ realm }));
                   }}
                 >
                   {t("deleteGroup")}

src/groups/components/GroupTree.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   Dropdown,
@@ -32,7 +33,7 @@ const GroupTreeContextMenu = ({
   const { t } = useTranslation("groups");
 
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [isOpen, toggleOpen] = useToggle();
   const [createOpen, toggleCreateOpen] = useToggle();
@@ -71,7 +72,7 @@ const GroupTreeContextMenu = ({
           </DropdownItem>,
           <DropdownItem
             key="edit"
-            onClick={() => history.push(`${location.pathname}/${group.id}`)}
+            onClick={() => navigate(`${location.pathname}/${group.id}`)}
           >
             {t("common:edit")}
           </DropdownItem>,

src/identity-providers/IdentityProvidersSection.tsx

@@ -1,5 +1,6 @@
 import { Fragment, useState } from "react";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { sortBy, groupBy } from "lodash-es";
 import {
@@ -46,7 +47,7 @@ export default function IdentityProvidersSection() {
     "groupName"
   );
   const { realm } = useRealm();
-  const history = useHistory();
+  const navigate = useNavigate();
   const [key, setKey] = useState(0);
   const refresh = () => setKey(key + 1);
 
@@ -98,7 +99,7 @@ export default function IdentityProvidersSection() {
   );
 
   const navigateToCreate = (providerId: string) =>
-    history.push(
+    navigate(
       toIdentityProviderCreate({
         realm,
         providerId,

src/identity-providers/add/AddIdentityProvider.tsx

@@ -1,4 +1,5 @@
-import { Link, useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { FormProvider, useForm } from "react-hook-form";
 import {
@@ -31,7 +32,7 @@ export default function AddIdentityProvider() {
 
   const { adminClient } = useAdminClient();
   const { addAlert, addError } = useAlerts();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { realm } = useRealm();
 
   const save = async (provider: IdentityProviderRepresentation) => {
@@ -42,7 +43,7 @@ export default function AddIdentityProvider() {
         alias: providerId,
       });
       addAlert(t("createSuccess"), AlertVariant.success);
-      history.push(
+      navigate(
         toIdentityProvider({
           realm,
           providerId: providerId!,

src/identity-providers/add/AddMapper.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { FormProvider, useForm } from "react-hook-form";
 import {
@@ -52,7 +53,7 @@ export default function AddMapper() {
   });
   const { handleSubmit, register, errors } = form;
   const { addAlert, addError } = useAlerts();
-  const history = useHistory();
+  const navigate = useNavigate();
   const localeSort = useLocaleSort();
 
   const { realm } = useRealm();
@@ -105,7 +106,7 @@ export default function AddMapper() {
         });
 
         addAlert(t("mapperCreateSuccess"), AlertVariant.success);
-        history.push(
+        navigate(
           toIdentityProviderEditMapper({
             realm,
             alias,
@@ -133,7 +134,7 @@ export default function AddMapper() {
           id: id!,
         });
         addAlert(t("deleteMapperSuccess"), AlertVariant.success);
-        history.push(
+        navigate(
           toIdentityProvider({ providerId, alias, tab: "mappers", realm })
         );
       } catch (error) {

src/identity-providers/add/AddOpenIdConnect.tsx

@@ -1,4 +1,5 @@
-import { Link, useHistory, useRouteMatch } from "react-router-dom";
+import { Link, useRouteMatch } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { FormProvider, useForm } from "react-hook-form";
 import {
@@ -26,7 +27,7 @@ type DiscoveryIdentity = IdentityProviderRepresentation & {
 
 export default function AddOpenIdConnect() {
   const { t } = useTranslation("identity-providers");
-  const history = useHistory();
+  const navigate = useNavigate();
   const { url } = useRouteMatch();
   const isKeycloak = url.endsWith("keycloak-oidc");
   const id = `${isKeycloak ? "keycloak-" : ""}oidc`;
@@ -51,7 +52,7 @@ export default function AddOpenIdConnect() {
         providerId: id,
       });
       addAlert(t("createSuccess"), AlertVariant.success);
-      history.push(
+      navigate(
         toIdentityProvider({
           realm,
           providerId: id,

src/identity-providers/add/AddSamlConnect.tsx

@@ -1,4 +1,5 @@
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { FormProvider, useForm } from "react-hook-form";
 import {
@@ -25,7 +26,7 @@ type DiscoveryIdentityProvider = IdentityProviderRepresentation & {
 
 export default function AddSamlConnect() {
   const { t } = useTranslation("identity-providers");
-  const history = useHistory();
+  const navigate = useNavigate();
   const id = "saml";
 
   const form = useForm<DiscoveryIdentityProvider>({
@@ -48,7 +49,7 @@ export default function AddSamlConnect() {
         providerId: id,
       });
       addAlert(t("createSuccess"), AlertVariant.success);
-      history.push(
+      navigate(
         toIdentityProvider({
           realm,
           providerId: id,

src/identity-providers/add/DetailSettings.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   Controller,
@@ -128,7 +129,7 @@ export default function DetailSettings() {
 
   const { adminClient } = useAdminClient();
   const { addAlert, addError } = useAlerts();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { realm } = useRealm();
   const [key, setKey] = useState(0);
   const refresh = () => setKey(key + 1);
@@ -203,7 +204,7 @@ export default function DetailSettings() {
       try {
         await adminClient.identityProviders.del({ alias: alias });
         addAlert(t("deletedSuccess"), AlertVariant.success);
-        history.push(toIdentityProviders({ realm }));
+        navigate(toIdentityProviders({ realm }));
       } catch (error) {
         addError("identity-providers:deleteErrorError", error);
       }
@@ -225,7 +226,7 @@ export default function DetailSettings() {
         });
         addAlert(t("deleteMapperSuccess"), AlertVariant.success);
         refresh();
-        history.push(
+        navigate(
           toIdentityProvider({ providerId, alias, tab: "mappers", realm })
         );
       } catch (error) {
@@ -382,7 +383,7 @@ export default function DetailSettings() {
                   instructions={t("identity-providers:noMappersInstructions")}
                   primaryActionText={t("identity-providers:addMapper")}
                   onPrimaryAction={() =>
-                    history.push(
+                    navigate(
                       toIdentityProviderAddMapper({
                         realm,
                         alias: alias!,

src/realm-roles/AssociatedRolesTab.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { useHistory, useParams, useRouteMatch } from "react-router-dom";
+import { useParams, useRouteMatch } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   AlertVariant,
@@ -48,7 +49,7 @@ export const AssociatedRolesTab = ({
 }: AssociatedRolesTabProps) => {
   const { t } = useTranslation("roles");
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const { addAlert, addError } = useAlerts();
   const { id, realm } = useParams<RealmRoleParams>();
 
@@ -126,7 +127,7 @@ export const AssociatedRolesTab = ({
           tab,
         })
       : undefined;
-    if (to) history.push(to);
+    if (to) navigate(to);
   };
 
   const AliasRenderer = ({ id, name, clientRole, containerId }: Role) => {

src/realm-roles/RealmRoleForm.tsx

@@ -13,7 +13,7 @@ import type { AttributeForm } from "../components/key-value-form/AttributeForm";
 import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { KeycloakTextArea } from "../components/keycloak-text-area/KeycloakTextArea";
 import { useRealm } from "../context/realm-context/RealmContext";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 
 export type RealmRoleFormProps = {
   form: UseFormMethods<AttributeForm>;
@@ -29,7 +29,7 @@ export const RealmRoleForm = ({
   reset,
 }: RealmRoleFormProps) => {
   const { t } = useTranslation("roles");
-  const history = useHistory();
+  const navigate = useNavigate();
   const { realm: realmName } = useRealm();
 
   return (
@@ -101,7 +101,7 @@ export const RealmRoleForm = ({
             <Button
               data-testid="cancel"
               onClick={() =>
-                editMode ? reset() : history.push(`/${realmName}/roles`)
+                editMode ? reset() : navigate(`/${realmName}/roles`)
               }
               variant="link"
             >

src/realm-roles/RealmRoleTabs.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { useHistory, useParams, useRouteMatch } from "react-router-dom";
+import { useParams, useRouteMatch } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import {
   AlertVariant,
   ButtonVariant,
@@ -47,7 +48,7 @@ export default function RealmRoleTabs() {
     mode: "onChange",
   });
   const { setValue, getValues, trigger, reset } = form;
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const { adminClient } = useAdminClient();
   const [role, setRole] = useState<AttributeForm>();
@@ -170,7 +171,7 @@ export default function RealmRoleTabs() {
         }
 
         setRole(convert(createdRole));
-        history.push(
+        navigate(
           url.substr(0, url.lastIndexOf("/") + 1) + createdRole.id + "/details"
         );
       }
@@ -198,7 +199,7 @@ export default function RealmRoleTabs() {
           });
         }
         addAlert(t("roleDeletedSuccess"), AlertVariant.success);
-        history.push(url.substr(0, url.indexOf("/roles") + "/roles".length));
+        navigate(url.substr(0, url.indexOf("/roles") + "/roles".length));
       } catch (error) {
         addError("roles:roleDeleteError", error);
       }
@@ -264,7 +265,7 @@ export default function RealmRoleTabs() {
           t("compositesRemovedAlertDescription")
         );
         const loc = url.replace(/\/AssociatedRoles/g, "/details");
-        history.push(loc);
+        navigate(loc);
         refresh();
       } catch (error) {
         addError("roles:roleDeleteError", error);
@@ -291,7 +292,7 @@ export default function RealmRoleTabs() {
           id,
           tab: "associated-roles",
         });
-    history.push(to);
+    navigate(to);
   };
 
   const addComposites = async (composites: RoleRepresentation[]) => {

src/realm-roles/RolesList.tsx

@@ -1,5 +1,6 @@
 import { FunctionComponent, useState } from "react";
-import { Link, useHistory, useRouteMatch } from "react-router-dom";
+import { Link, useRouteMatch } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { AlertVariant, Button, ButtonVariant } from "@patternfly/react-core";
 
@@ -55,7 +56,7 @@ export const RolesList = ({
   isReadOnly,
 }: RolesListProps) => {
   const { t } = useTranslation(messageBundle);
-  const history = useHistory();
+  const navigate = useNavigate();
   const { adminClient } = useAdminClient();
   const { addAlert, addError } = useAlerts();
   const { url } = useRouteMatch();
@@ -115,7 +116,7 @@ export const RolesList = ({
     },
   });
 
-  const goToCreate = () => history.push(`${url}/add-role`);
+  const goToCreate = () => navigate(`${url}/add-role`);
 
   if (!realm) {
     return <KeycloakSpinner />;

src/realm-roles/UsersInRoleTab.tsx

@@ -2,7 +2,8 @@ import { Button, PageSection, Popover } from "@patternfly/react-core";
 import { QuestionCircleIcon } from "@patternfly/react-icons";
 
 import { useTranslation } from "react-i18next";
-import { useHistory, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useHelp } from "../components/help-enabler/HelpHeader";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
@@ -12,7 +13,7 @@ import { emptyFormatter, upperCaseFormatter } from "../util";
 import type { ClientRoleParams } from "./routes/ClientRole";
 
 export const UsersInRoleTab = () => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { realm } = useRealm();
 
   const { t } = useTranslation("roles");
@@ -62,7 +63,7 @@ export const UsersInRoleTab = () => {
                   <Button
                     className="kc-groups-link"
                     variant="link"
-                    onClick={() => history.push(`/${realm}/groups`)}
+                    onClick={() => navigate(`/${realm}/groups`)}
                   >
                     {t("common:groups")}
                   </Button>
@@ -70,7 +71,7 @@ export const UsersInRoleTab = () => {
                   <Button
                     className="kc-users-link"
                     variant="link"
-                    onClick={() => history.push(`/${realm}/users`)}
+                    onClick={() => navigate(`/${realm}/users`)}
                   >
                     {t("users")}.
                   </Button>
@@ -99,7 +100,7 @@ export const UsersInRoleTab = () => {
                 <Button
                   className="kc-groups-link-empty-state"
                   variant="link"
-                  onClick={() => history.push(`/${realm}/groups`)}
+                  onClick={() => navigate(`/${realm}/groups`)}
                 >
                   {t("common:groups")}
                 </Button>
@@ -107,7 +108,7 @@ export const UsersInRoleTab = () => {
                 <Button
                   className="kc-users-link-empty-state"
                   variant="link"
-                  onClick={() => history.push(`/${realm}/users`)}
+                  onClick={() => navigate(`/${realm}/users`)}
                 >
                   {t("users")}
                 </Button>

src/realm-settings/ClientProfileForm.tsx

@@ -23,7 +23,8 @@ import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
 import { FormAccess } from "../components/form-access/FormAccess";
 import { ViewHeader } from "../components/view-header/ViewHeader";
-import { Link, useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useAlerts } from "../components/alert/Alerts";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import type ClientProfileRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientProfileRepresentation";
@@ -49,7 +50,7 @@ const defaultValues: ClientProfileForm = {
 
 export default function ClientProfileForm() {
   const { t } = useTranslation("realm-settings");
-  const history = useHistory();
+  const navigate = useNavigate();
   const {
     handleSubmit,
     setValue,
@@ -109,7 +110,7 @@ export default function ClientProfileForm() {
         AlertVariant.success
       );
 
-      history.push(toClientProfile({ realm, profileName: form.name }));
+      navigate(toClientProfile({ realm, profileName: form.name }));
     } catch (error) {
       addError(
         editMode
@@ -162,7 +163,7 @@ export default function ClientProfileForm() {
             globalProfiles,
           });
           addAlert(t("deleteExecutorSuccess"), AlertVariant.success);
-          history.push(toClientProfile({ realm, profileName }));
+          navigate(toClientProfile({ realm, profileName }));
         } catch (error) {
           addError(t("deleteExecutorError"), error);
         }
@@ -177,7 +178,7 @@ export default function ClientProfileForm() {
             globalProfiles,
           });
           addAlert(t("deleteClientSuccess"), AlertVariant.success);
-          history.push(toClientPolicies({ realm, tab: "profiles" }));
+          navigate(toClientPolicies({ realm, tab: "profiles" }));
         } catch (error) {
           addError(t("deleteClientError"), error);
         }

src/realm-settings/ExecutorForm.tsx

@@ -16,7 +16,8 @@ import { useAlerts } from "../components/alert/Alerts";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { HelpItem } from "../components/help-enabler/HelpItem";
-import { Link, useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import type ComponentTypeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentTypeRepresentation";
 import type { ConfigPropertyRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigInfoRepresentation";
@@ -37,7 +38,7 @@ const defaultValues: ExecutorForm = {
 
 export default function ExecutorForm() {
   const { t } = useTranslation("realm-settings");
-  const history = useHistory();
+  const navigate = useNavigate();
   const { realm, profileName } = useParams<ClientProfileParams>();
   const { executorName } = useParams<ExecutorParams>();
   const { addAlert, addError } = useAlerts();
@@ -124,7 +125,7 @@ export default function ExecutorForm() {
         AlertVariant.success
       );
 
-      history.push(toClientProfile({ realm, profileName }));
+      navigate(toClientProfile({ realm, profileName }));
     } catch (error) {
       addError(
         editMode

src/realm-settings/NewAttributeSettings.tsx

@@ -8,7 +8,8 @@ import {
 } from "@patternfly/react-core";
 import { FormProvider, useForm, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { ScrollForm } from "../components/scroll-form/ScrollForm";
 import type UserProfileConfig from "@keycloak/keycloak-admin-client/lib/defs/userProfileConfig";
 import { AttributeGeneralSettings } from "./user-profile/attribute/AttributeGeneralSettings";
@@ -102,7 +103,7 @@ export default function NewAttributeSettings() {
   const { adminClient } = useAdminClient();
   const form = useForm<UserProfileConfig>({ shouldUnregister: false });
   const { t } = useTranslation("realm-settings");
-  const history = useHistory();
+  const navigate = useNavigate();
   const { addAlert, addError } = useAlerts();
   const [config, setConfig] = useState<UserProfileConfig | null>(null);
   const editMode = attributeName ? true : false;
@@ -208,7 +209,7 @@ export default function NewAttributeSettings() {
         realm,
       });
 
-      history.push(toUserProfile({ realm, tab: "attributes" }));
+      navigate(toUserProfile({ realm, tab: "attributes" }));
 
       addAlert(
         t("realm-settings:createAttributeSuccess"),

src/realm-settings/NewClientPolicyCondition.tsx

@@ -20,7 +20,8 @@ import type ClientPolicyRepresentation from "@keycloak/keycloak-admin-client/lib
 import { camelCase } from "lodash-es";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useAlerts } from "../components/alert/Alerts";
-import { useHistory, useParams } from "react-router";
+import { useParams } from "react-router";
+import { useNavigate } from "react-router-dom-v5-compat";
 import type ComponentTypeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentTypeRepresentation";
 import { useRealm } from "../context/realm-context/RealmContext";
 import type { ConfigPropertyRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigInfoRepresentation";
@@ -41,7 +42,7 @@ type ConfigProperty = ConfigPropertyRepresentation & {
 export default function NewClientPolicyCondition() {
   const { t } = useTranslation("realm-settings");
   const { addAlert, addError } = useAlerts();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { realm } = useRealm();
 
   const [openConditionType, setOpenConditionType] = useState(false);
@@ -162,7 +163,7 @@ export default function NewClientPolicyCondition() {
         policies: updatedPolicies,
       });
       setPolicies(updatedPolicies);
-      history.push(toEditClientPolicy({ realm, policyName }));
+      navigate(toEditClientPolicy({ realm, policyName }));
       addAlert(
         conditionName
           ? t("realm-settings:updateClientConditionSuccess")
@@ -267,7 +268,7 @@ export default function NewClientPolicyCondition() {
               variant="link"
               data-testid="addCondition-cancelBtn"
               onClick={() =>
-                history.push(toEditClientPolicy({ realm, policyName }))
+                navigate(toEditClientPolicy({ realm, policyName }))
               }
             >
               {t("common:cancel")}

src/realm-settings/NewClientPolicyForm.tsx

@@ -23,7 +23,8 @@ import { useTranslation } from "react-i18next";
 import { Controller, useForm } from "react-hook-form";
 import { FormAccess } from "../components/form-access/FormAccess";
 import { ViewHeader } from "../components/view-header/ViewHeader";
-import { Link, useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { useAlerts } from "../components/alert/Alerts";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
@@ -97,7 +98,7 @@ export default function NewClientPolicyForm() {
 
   const { policyName } = useParams<EditClientPolicyParams>();
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const form = useForm<ClientPolicyRepresentation>({ mode: "onChange" });
   const { handleSubmit } = form;
 
@@ -259,9 +260,7 @@ export default function NewClientPolicyForm() {
           : t("realm-settings:createClientPolicySuccess"),
         AlertVariant.success
       );
-      history.push(
+      navigate(toEditClientPolicy({ realm, policyName: createdForm.name! }));
-        toEditClientPolicy({ realm, policyName: createdForm.name! })
-      );
       setShowAddConditionsAndProfilesForm(true);
     } catch (error) {
       addError("realm-settings:createClientPolicyError", error);
@@ -285,7 +284,7 @@ export default function NewClientPolicyForm() {
           policies: updatedPolicies,
         });
         addAlert(t("deleteClientPolicySuccess"), AlertVariant.success);
-        history.push(
+        navigate(
           toClientPolicies({
             realm,
             tab: "policies",
@@ -313,7 +312,7 @@ export default function NewClientPolicyForm() {
               policies: policies,
             });
             addAlert(t("deleteConditionSuccess"), AlertVariant.success);
-            history.push(
+            navigate(
               toEditClientPolicy({ realm, policyName: formValues.name! })
             );
           } catch (error) {
@@ -329,7 +328,7 @@ export default function NewClientPolicyForm() {
               policies: updatedPolicies,
             });
             addAlert(t("deleteClientSuccess"), AlertVariant.success);
-            history.push(
+            navigate(
               toClientPolicies({
                 realm,
                 tab: "policies",
@@ -358,9 +357,7 @@ export default function NewClientPolicyForm() {
             policies: policies,
           });
           addAlert(t("deleteClientPolicyProfileSuccess"), AlertVariant.success);
-          history.push(
+          navigate(toEditClientPolicy({ realm, policyName: formValues.name! }));
-            toEditClientPolicy({ realm, policyName: formValues.name! })
-          );
         } catch (error) {
           addError(t("deleteClientPolicyProfileError"), error);
         }
@@ -374,7 +371,7 @@ export default function NewClientPolicyForm() {
             policies: updatedPolicies,
           });
           addAlert(t("deleteClientSuccess"), AlertVariant.success);
-          history.push(
+          navigate(
             toClientPolicies({
               realm,
               tab: "policies",
@@ -422,7 +419,7 @@ export default function NewClientPolicyForm() {
         policies: newPolicies,
       });
       setPolicies(newPolicies);
-      history.push(toEditClientPolicy({ realm, policyName: formValues.name! }));
+      navigate(toEditClientPolicy({ realm, policyName: formValues.name! }));
       addAlert(
         t("realm-settings:addClientProfileSuccess"),
         AlertVariant.success
@@ -506,7 +503,7 @@ export default function NewClientPolicyForm() {
               onClick={() =>
                 showAddConditionsAndProfilesForm || policyName
                   ? reset()
-                  : history.push(
+                  : navigate(
                       toClientPolicies({
                         realm,
                         tab: "policies",

src/realm-settings/PoliciesTab.tsx

@@ -19,7 +19,8 @@ import { useTranslation } from "react-i18next";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { prettyPrintJSON } from "../util";
 import { CodeEditor, Language } from "@patternfly/react-code-editor";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import type ClientPolicyRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientPolicyRepresentation";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { useAlerts } from "../components/alert/Alerts";
@@ -38,7 +39,7 @@ export const PoliciesTab = () => {
   const { adminClient } = useAdminClient();
   const { addAlert, addError } = useAlerts();
   const { realm } = useRealm();
-  const history = useHistory();
+  const navigate = useNavigate();
   const [show, setShow] = useState(false);
   const [policies, setPolicies] = useState<ClientPolicyRepresentation[]>();
   const [selectedPolicy, setSelectedPolicy] =
@@ -81,7 +82,7 @@ export const PoliciesTab = () => {
       await adminClient.clientPolicies.updatePolicy({
         policies: updatedPolicies,
       });
-      history.push(toClientPolicies({ realm, tab: "policies" }));
+      navigate(toClientPolicies({ realm, tab: "policies" }));
       addAlert(
         t("realm-settings:updateClientPolicySuccess"),
         AlertVariant.success
@@ -234,7 +235,7 @@ export const PoliciesTab = () => {
               message={t("realm-settings:noClientPolicies")}
               instructions={t("realm-settings:noClientPoliciesInstructions")}
               primaryActionText={t("realm-settings:createClientPolicy")}
-              onPrimaryAction={() => history.push(toAddClientPolicy({ realm }))}
+              onPrimaryAction={() => navigate(toAddClientPolicy({ realm }))}
             />
           }
           ariaLabelKey="realm-settings:clientPolicies"

src/realm-settings/RealmSettingsTabs.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import {
@@ -74,7 +75,7 @@ const RealmSettingsHeader = ({
   const { adminClient } = useAdminClient();
   const { refresh: refreshRealms } = useRealms();
   const { addAlert, addError } = useAlerts();
-  const history = useHistory();
+  const navigate = useNavigate();
   const [partialImportOpen, setPartialImportOpen] = useState(false);
   const [partialExportOpen, setPartialExportOpen] = useState(false);
 
@@ -98,7 +99,7 @@ const RealmSettingsHeader = ({
         await adminClient.realms.del({ realm: realmName });
         addAlert(t("deletedSuccess"), AlertVariant.success);
         await refreshRealms();
-        history.push(toDashboard({ realm: environment.masterRealm }));
+        navigate(toDashboard({ realm: environment.masterRealm }));
         refresh();
       } catch (error) {
         addError("realm-settings:deleteError", error);
@@ -174,6 +175,7 @@ export const RealmSettingsTabs = ({
   const { realm: realmName } = useRealm();
   const { refresh: refreshRealms } = useRealms();
   const history = useHistory();
+  const navigate = useNavigate();
   const isFeatureEnabled = useIsFeatureEnabled();
 
   const { control, setValue, getValues } = useForm({
@@ -225,7 +227,7 @@ export const RealmSettingsTabs = ({
     const isRealmRenamed = realmName !== (r.realm || realm.realm);
     if (isRealmRenamed) {
       await refreshRealms();
-      history.push(toRealmSettings({ realm: r.realm!, tab: "general" }));
+      navigate(toRealmSettings({ realm: r.realm!, tab: "general" }));
     }
     refresh();
   };

src/realm-settings/keys/KeysListTab.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   Button,
@@ -80,7 +80,7 @@ const SelectFilter = ({ onFilter }: SelectFilterProps) => {
 
 export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
   const { t } = useTranslation("realm-settings");
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [publicKey, setPublicKey] = useState("");
   const [certificate, setCertificate] = useState("");
@@ -235,7 +235,7 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
             instructions={t("noKeysDescription")}
             primaryActionText={t("addProvider")}
             onPrimaryAction={() =>
-              history.push(toKeysTab({ realm, tab: "providers" }))
+              navigate(toKeysTab({ realm, tab: "providers" }))
             }
           />
         }

src/realm-settings/user-profile/AttributesGroupForm.tsx

@@ -10,7 +10,8 @@ import {
 import { useEffect, useMemo } from "react";
 import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { Link, useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { KeyValueInput } from "../../components/key-value-form/KeyValueInput";
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
@@ -57,7 +58,7 @@ export default function AttributesGroupForm() {
   const { t } = useTranslation();
   const { realm } = useRealm();
   const { config, save } = useUserProfile();
-  const history = useHistory();
+  const navigate = useNavigate();
   const params = useParams<Partial<EditAttributesGroupParams>>();
   const form = useForm<FormFields>({ defaultValues, shouldUnregister: false });
 
@@ -99,7 +100,7 @@ export default function AttributesGroupForm() {
     const success = await save({ ...config, groups });
 
     if (success) {
-      history.push(toUserProfile({ realm, tab: "attributes-group" }));
+      navigate(toUserProfile({ realm, tab: "attributes-group" }));
     }
   };
 

src/realm-settings/user-profile/AttributesGroupTab.tsx

@@ -7,7 +7,8 @@ import {
 } from "@patternfly/react-core";
 import { useEffect, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTable";
@@ -19,7 +20,7 @@ import { useUserProfile } from "./UserProfileContext";
 export const AttributesGroupTab = () => {
   const { config, save } = useUserProfile();
   const { t } = useTranslation("attributes-group");
-  const history = useHistory();
+  const navigate = useNavigate();
   const { realm } = useRealm();
   const [key, setKey] = useState(0);
   const [groupToDelete, setGroupToDelete] = useState<UserProfileGroup>();
@@ -109,9 +110,7 @@ export const AttributesGroupTab = () => {
             message={t("emptyStateMessage")}
             instructions={t("emptyStateInstructions")}
             primaryActionText={t("createGroupText")}
-            onPrimaryAction={() =>
+            onPrimaryAction={() => navigate(toNewAttributesGroup({ realm }))}
-              history.push(toNewAttributesGroup({ realm }))
-            }
           />
         }
       />

src/realm-settings/user-profile/AttributesTab.tsx

@@ -15,7 +15,8 @@ import { FilterIcon } from "@patternfly/react-icons";
 
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { DraggableTable } from "../../authentication/components/DraggableTable";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { toAddAttribute } from "../routes/AddAttribute";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useUserProfile } from "./UserProfileContext";
@@ -32,7 +33,7 @@ export const AttributesTab = () => {
   const { config, save } = useUserProfile();
   const { realm: realmName } = useRealm();
   const { t } = useTranslation("realm-settings");
-  const history = useHistory();
+  const navigate = useNavigate();
   const [filter, setFilter] = useState("allGroups");
   const [isFilterTypeDropdownOpen, toggleIsFilterTypeDropdownOpen] =
     useToggle();
@@ -174,7 +175,7 @@ export const AttributesTab = () => {
           {
             title: t("common:edit"),
             onClick: (_key, _idx, component) => {
-              history.push(
+              navigate(
                 toAttribute({
                   realm: realmName,
                   attributeName: component.name,

src/realm/add/NewRealmForm.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { Controller, useForm } from "react-hook-form";
 import {
@@ -24,7 +24,7 @@ import { convertFormValuesToObject, convertToFormValues } from "../../util";
 
 export default function NewRealmForm() {
   const { t } = useTranslation("realm");
-  const history = useHistory();
+  const navigate = useNavigate();
   const { refresh, whoAmI } = useWhoAmI();
   const { refresh: refreshRealms } = useRealms();
   const { adminClient } = useAdminClient();
@@ -55,7 +55,7 @@ export default function NewRealmForm() {
 
       refresh();
       await refreshRealms();
-      history.push(toDashboard({ realm: fields.realm }));
+      navigate(toDashboard({ realm: fields.realm }));
     } catch (error) {
       addError("realm:saveRealmError", error);
     }
@@ -113,7 +113,7 @@ export default function NewRealmForm() {
             <Button variant="primary" type="submit">
               {t("common:create")}
             </Button>
-            <Button variant="link" onClick={() => history.goBack()}>
+            <Button variant="link" onClick={() => navigate(-1)}>
               {t("common:cancel")}
             </Button>
           </ActionGroup>

src/user-federation/UserFederationKerberosSettings.tsx

@@ -15,14 +15,15 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useAlerts } from "../components/alert/Alerts";
 import { useTranslation } from "react-i18next";
-import { useHistory, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { Header } from "./shared/Header";
 import { toUserFederation } from "./routes/UserFederation";
 
 export default function UserFederationKerberosSettings() {
   const { t } = useTranslation("user-federation");
   const form = useForm<ComponentRepresentation>({ mode: "onChange" });
-  const history = useHistory();
+  const navigate = useNavigate();
   const { adminClient } = useAdminClient();
   const { realm } = useRealm();
 
@@ -54,7 +55,7 @@ export default function UserFederationKerberosSettings() {
     try {
       if (!id) {
         await adminClient.components.create(component);
-        history.push(`/${realm}/user-federation`);
+        navigate(`/${realm}/user-federation`);
       } else {
         await adminClient.components.update({ id }, component);
       }
@@ -87,7 +88,7 @@ export default function UserFederationKerberosSettings() {
             </Button>
             <Button
               variant="link"
-              onClick={() => history.push(toUserFederation({ realm }))}
+              onClick={() => navigate(toUserFederation({ realm }))}
               data-testid="kerberos-cancel"
             >
               {t("common:cancel")}

src/user-federation/UserFederationLdapSettings.tsx

@@ -24,7 +24,8 @@ import { FormProvider, useForm, useFormContext } from "react-hook-form";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useAlerts } from "../components/alert/Alerts";
 import { useTranslation } from "react-i18next";
-import { useHistory, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { ScrollForm } from "../components/scroll-form/ScrollForm";
 
 import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
@@ -47,7 +48,7 @@ const AddLdapFormContent = ({
   const { t } = useTranslation("user-federation");
   const form = useFormContext();
   const { id } = useParams<{ id: string }>();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const { realm } = useRealm();
 
@@ -94,7 +95,7 @@ const AddLdapFormContent = ({
           </Button>
           <Button
             variant="link"
-            onClick={() => history.push(toUserFederation({ realm }))}
+            onClick={() => navigate(toUserFederation({ realm }))}
             data-testid="ldap-cancel"
           >
             {t("common:cancel")}
@@ -108,7 +109,7 @@ const AddLdapFormContent = ({
 export default function UserFederationLdapSettings() {
   const { t } = useTranslation("user-federation");
   const form = useForm<ComponentRepresentation>({ mode: "onChange" });
-  const history = useHistory();
+  const navigate = useNavigate();
   const { adminClient } = useAdminClient();
   const { realm } = useRealm();
 
@@ -167,7 +168,7 @@ export default function UserFederationLdapSettings() {
     try {
       if (!id) {
         await adminClient.components.create(component);
-        history.push(toUserFederation({ realm }));
+        navigate(toUserFederation({ realm }));
       } else {
         await adminClient.components.update({ id }, component);
       }

src/user-federation/UserFederationSection.tsx

@@ -17,7 +17,7 @@ import { DatabaseIcon } from "@patternfly/react-icons";
 import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { ManagePriorityDialog } from "./ManagePriorityDialog";
@@ -42,7 +42,7 @@ export default function UserFederationSection() {
   const [key, setKey] = useState(0);
   const refresh = () => setKey(new Date().getTime());
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [manageDisplayDialog, setManageDisplayDialog] = useState(false);
 
@@ -72,7 +72,7 @@ export default function UserFederationSection() {
         <DropdownItem
           key={p.id}
           onClick={() =>
-            history.push(toProvider({ realm, providerId: p.id!, id: "new" }))
+            navigate(toProvider({ realm, providerId: p.id!, id: "new" }))
           }
         >
           {p.id.toUpperCase() == "LDAP"
@@ -200,7 +200,7 @@ export default function UserFederationSection() {
                   role="button"
                   isHoverable
                   onClick={() =>
-                    history.push(toProvider({ realm, providerId: p.id! }))
+                    navigate(toProvider({ realm, providerId: p.id! }))
                   }
                   data-testid={`${p.id}-card`}
                 >

src/user-federation/custom/CustomProviderSettings.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import { FormProvider, useForm } from "react-hook-form";
 import {
@@ -29,7 +30,7 @@ import "./custom-provider-settings.css";
 export default function CustomProviderSettings() {
   const { t } = useTranslation("user-federation");
   const { id, providerId } = useParams<ProviderRouteParams>();
-  const history = useHistory();
+  const navigate = useNavigate();
   const form = useForm<ComponentRepresentation>({
     mode: "onChange",
   });
@@ -88,7 +89,7 @@ export default function CustomProviderSettings() {
     try {
       if (!id) {
         await adminClient.components.create(saveComponent);
-        history.push(toUserFederation({ realm: realmName }));
+        navigate(toUserFederation({ realm: realmName }));
       } else {
         await adminClient.components.update({ id }, saveComponent);
       }

src/user-federation/ldap/mappers/LdapMapperDetails.tsx

@@ -17,7 +17,8 @@ import { convertFormValuesToObject, convertToFormValues } from "../../../util";
 import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
 import { useAdminClient, useFetch } from "../../../context/auth/AdminClient";
 import { ViewHeader } from "../../../components/view-header/ViewHeader";
-import { useHistory, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import { useAlerts } from "../../../components/alert/Alerts";
 import { useTranslation } from "react-i18next";
@@ -39,7 +40,7 @@ export default function LdapMapperDetails() {
 
   const { adminClient } = useAdminClient();
   const { id, mapperId } = useParams<{ id: string; mapperId: string }>();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { realm } = useRealm();
   const { t } = useTranslation("user-federation");
   const { addAlert, addError } = useAlerts();
@@ -92,7 +93,7 @@ export default function LdapMapperDetails() {
     try {
       if (mapperId === "new") {
         await adminClient.components.create(map);
-        history.push(
+        navigate(
           toUserFederationLdap({ realm, id: mapper.parentId!, tab: "mappers" })
         );
       } else {
@@ -128,7 +129,7 @@ export default function LdapMapperDetails() {
           id: mapping!.id!,
         });
         addAlert(t("common:mappingDeletedSuccess"), AlertVariant.success);
-        history.push(toUserFederationLdap({ id, realm, tab: "mappers" }));
+        navigate(toUserFederationLdap({ id, realm, tab: "mappers" }));
       } catch (error) {
         addError("common:mappingDeletedError", error);
       }
@@ -306,8 +307,8 @@ export default function LdapMapperDetails() {
               variant="link"
               onClick={() =>
                 isNew
-                  ? history.goBack()
+                  ? navigate(-1)
-                  : history.push(
+                  : navigate(
                       `/${realm}/user-federation/ldap/${
                         mapping!.parentId
                       }/mappers`

src/user-federation/ldap/mappers/LdapMapperList.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Link, useHistory, useParams, useRouteMatch } from "react-router-dom";
+import { Link, useParams, useRouteMatch } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   AlertVariant,
@@ -17,7 +18,7 @@ import { useConfirmDialog } from "../../../components/confirm-dialog/ConfirmDial
 import useLocaleSort, { mapByKey } from "../../../utils/useLocaleSort";
 
 export const LdapMapperList = () => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { t } = useTranslation("user-federation");
   const { adminClient } = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -97,7 +98,7 @@ export const LdapMapperList = () => {
             <Button
               data-testid="add-mapper-btn"
               variant="primary"
-              onClick={() => history.push(`${url}/new`)}
+              onClick={() => navigate(`${url}/new`)}
             >
               {t("common:addMapper")}
             </Button>
@@ -126,7 +127,7 @@ export const LdapMapperList = () => {
             message={t("common:emptyMappers")}
             instructions={t("common:emptyMappersInstructions")}
             primaryActionText={t("common:emptyPrimaryAction")}
-            onPrimaryAction={() => history.push(`${url}/new`)}
+            onPrimaryAction={() => navigate(`${url}/new`)}
           />
         }
       />

src/user-federation/shared/Header.tsx

@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
-import { useHistory, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useTranslation } from "react-i18next";
 import {
   AlertVariant,
@@ -31,7 +32,7 @@ export const Header = ({
 }: HeaderProps) => {
   const { t } = useTranslation("user-federation");
   const { id } = useParams<ProviderRouteParams>();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const { adminClient } = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -58,7 +59,7 @@ export const Header = ({
       try {
         await adminClient.components.del({ id: id! });
         addAlert(t("userFedDeletedSuccess"), AlertVariant.success);
-        history.replace(toUserFederation({ realm }));
+        navigate(toUserFederation({ realm }), { replace: true });
       } catch (error) {
         addError("user-federation:userFedDeleteError", error);
       }

src/user/SearchUser.tsx

@@ -10,7 +10,8 @@ import {
 } from "@patternfly/react-core";
 import { SearchIcon } from "@patternfly/react-icons";
 import { useForm } from "react-hook-form";
-import { useHistory, useRouteMatch } from "react-router-dom";
+import { useRouteMatch } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 
 import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 
@@ -22,9 +23,9 @@ export const SearchUser = ({ onSearch }: SearchUserProps) => {
   const { t } = useTranslation("users");
   const { register, handleSubmit } = useForm<{ search: string }>();
   const { url } = useRouteMatch();
-  const history = useHistory();
+  const navigate = useNavigate();
 
-  const goToCreate = () => history.push(`${url}/add-user`);
+  const goToCreate = () => navigate(`${url}/add-user`);
 
   return (
     <EmptyState>

src/user/UserForm.tsx

@@ -13,7 +13,7 @@ import {
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { Controller, useFormContext } from "react-hook-form";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 
 import { FormAccess } from "../components/form-access/FormAccess";
 import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
@@ -58,7 +58,7 @@ export const UserForm = ({
     isRequiredUserActionsDropdownOpen,
     setRequiredUserActionsDropdownOpen,
   ] = useState(false);
-  const history = useHistory();
+  const navigate = useNavigate();
   const { adminClient } = useAdminClient();
   const { addAlert, addError } = useAlerts();
 
@@ -432,7 +432,7 @@ export const UserForm = ({
         <Button
           data-testid="cancel-create-user"
           onClick={() =>
-            user?.id ? reset(user) : history.push(`/${realmName}/users`)
+            user?.id ? reset(user) : navigate(`/${realmName}/users`)
           }
           variant="link"
         >

src/user/UsersSection.tsx

@@ -32,6 +32,7 @@ import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/us
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
@@ -64,6 +65,7 @@ export default function UsersSection() {
   const { addAlert, addError } = useAlerts();
   const { realm: realmName } = useRealm();
   const history = useHistory();
+  const navigate = useNavigate();
   const [userStorage, setUserStorage] = useState<ComponentRepresentation[]>();
   const [searchUser, setSearchUser] = useState<string>();
   const [realm, setRealm] = useState<RealmRepresentation | undefined>();
@@ -222,7 +224,7 @@ export default function UsersSection() {
     );
   };
 
-  const goToCreate = () => history.push(toAddUser({ realm: realmName }));
+  const goToCreate = () => navigate(toAddUser({ realm: realmName }));
 
   if (!userStorage) {
     return <KeycloakSpinner />;

src/user/UsersTabs.tsx

@@ -16,7 +16,8 @@ import { ViewHeader } from "../components/view-header/ViewHeader";
 import { BruteForced, UserForm } from "./UserForm";
 import { useAlerts } from "../components/alert/Alerts";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
-import { useHistory, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom-v5-compat";
 import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
 import { UserGroups } from "./UserGroups";
 import { UserConsents } from "./UserConsents";
@@ -35,7 +36,7 @@ import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner"
 const UsersTabs = () => {
   const { t } = useTranslation("users");
   const { addAlert, addError } = useAlerts();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { realm } = useRealm();
   const { hasAccess } = useAccess();
 
@@ -100,7 +101,7 @@ const UsersTabs = () => {
         });
 
         addAlert(t("userCreated"), AlertVariant.success);
-        history.push(toUser({ id: createdUser.id, realm, tab: "settings" }));
+        navigate(toUser({ id: createdUser.id, realm, tab: "settings" }));
       }
     } catch (error) {
       addError("users:userCreateError", error);
@@ -116,7 +117,7 @@ const UsersTabs = () => {
       try {
         await adminClient.users.del({ id });
         addAlert(t("userDeletedSuccess"), AlertVariant.success);
-        history.push(toUsers({ realm }));
+        navigate(toUsers({ realm }));
       } catch (error) {
         addError("users:userDeletedError", error);
       }