message: Use React Router v6 for the routable tabs of clients page
diff: @@ -13,7 +13,6 @@ import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/
  import type { ClientQuery } from "@keycloak/keycloak-admin-client/lib/resources/clients";
  import { useState } from "react";
  import { useTranslation } from "react-i18next";
  -import { useHistory } from "react-router-dom";
  import { Link } from "react-router-dom-v5-compat";
  import { useAlerts } from "../components/alert/Alerts";
  import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
  @@ -35,8 +34,8 @@ import { isRealmClient, getProtocolName } from "./utils";
  import helpUrls from "../help-urls";
  import { useAccess } from "../context/access/Access";
  import {
  - routableTab,
  RoutableTabs,
  + useRoutableTab,
  } from "../components/routable-tabs/RoutableTabs";
  import { ClientsTab, toClients } from "./routes/Clients";
  @@ -46,7 +45,6 @@ export default function ClientsSection() {
  const { adminClient } = useAdminClient();
  const { realm } = useRealm();
  - const history = useHistory();
  const [key, setKey] = useState(0);
  const refresh = () => setKey(new Date().getTime());
  @@ -67,6 +65,11 @@ export default function ClientsSection() {
  return await adminClient.clients.find({ ...params });
  };
  + const useTab = (tab: ClientsTab) => useRoutableTab(toClients({ realm, tab }));
  +
  + const listTab = useTab("list");
  + const initialAccessTokenTab = useTab("initial-access-token");
  +
  const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
  titleKey: t("clientDelete", { clientId: selectedClient?.clientId }),
  messageKey: "clients:clientDeleteConfirm",
  @@ -140,12 +143,6 @@ export default function ClientsSection() {
  );
  };
  - const route = (tab: ClientsTab) =>
  - routableTab({
  - to: toClients({ realm, tab }),
  - history,
  - });
  -
  return (
  <>
  <ViewHeader
  @@ -166,7 +163,7 @@ export default function ClientsSection() {
  <Tab
  data-testid="list"
  title={<TabTitleText>{t("clientsList")}</TabTitleText>}
  - {...route("list")}
  + {...listTab}
  >
  <DeleteConfirm />
  <KeycloakDataTable
  @@ -242,7 +239,7 @@ export default function ClientsSection() {
  <Tab
  data-testid="initialAccessToken"
  title={<TabTitleText>{t("initialAccessToken")}</TabTitleText>}
  - {...route("initial-access-token")}
  + {...initialAccessTokenTab}
  >
  <InitialAccessTokenList />
  </Tab>
  