message: Use React Router v6 for the routable tabs of authentication page
diff: import { useState } from "react";
  -import { useHistory } from "react-router-dom";
  import { Link } from "react-router-dom-v5-compat";
  import { Trans, useTranslation } from "react-i18next";
  import { sortBy } from "lodash-es";
  @@ -32,8 +31,8 @@ import helpUrls from "../help-urls";
  import { BindFlowDialog } from "./BindFlowDialog";
  import { UsedBy } from "./components/UsedBy";
  import {
  - routableTab,
  RoutableTabs,
  + useRoutableTab,
  } from "../components/routable-tabs/RoutableTabs";
  import { AuthenticationTab, toAuthentication } from "./routes/Authentication";
  import { addTrailingSlash } from "../util";
  @@ -61,7 +60,6 @@ export default function AuthenticationSection() {
  const { t } = useTranslation("authentication");
  const { adminClient } = useAdminClient();
  const { realm } = useRealm();
  - const history = useHistory();
  const [key, setKey] = useState(0);
  const refresh = () => setKey(key + 1);
  const { addAlert, addError } = useAlerts();
  @@ -92,6 +90,13 @@ export default function AuthenticationSection() {
  );
  };
  + const useTab = (tab: AuthenticationTab) =>
  + useRoutableTab(toAuthentication({ realm, tab }));
  +
  + const flowsTab = useTab("flows");
  + const requiredActionsTab = useTab("required-actions");
  + const policiesTab = useTab("policies");
  +
  const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({
  titleKey: "authentication:deleteConfirmFlow",
  children: (
  @@ -141,12 +146,6 @@ export default function AuthenticationSection() {
  </>
  );
  - const route = (tab: AuthenticationTab) =>
  - routableTab({
  - to: toAuthentication({ realm, tab }),
  - history,
  - });
  -
  return (
  <>
  <DeleteConfirm />
  @@ -184,7 +183,7 @@ export default function AuthenticationSection() {
  <Tab
  data-testid="flows"
  title={<TabTitleText>{t("flows")}</TabTitleText>}
  - {...route("flows")}
  + {...flowsTab}
  >
  <KeycloakDataTable
  key={key}
  @@ -260,14 +259,14 @@ export default function AuthenticationSection() {
  <Tab
  data-testid="requiredActions"
  title={<TabTitleText>{t("requiredActions")}</TabTitleText>}
  - {...route("required-actions")}
  + {...requiredActionsTab}
  >
  <RequiredActions />
  </Tab>
  <Tab
  data-testid="policies"
  title={<TabTitleText>{t("policies")}</TabTitleText>}
  - {...route("policies")}
  + {...policiesTab}
  >
  <Policies />
  </Tab>
  