Upgrade to React Router v6 (#4198)

.github/dependabot.yml

@@ -12,12 +12,6 @@ updates:
     ignore:
       - dependency-name: react-hook-form
         update-types: ["version-update:semver-major"]
-      - dependency-name: react-router
-        update-types: ["version-update:semver-major"]
-      - dependency-name: react-router-dom
-        update-types: ["version-update:semver-major"]
-      - dependency-name: use-react-router-breadcrumbs
-        update-types: ["version-update:semver-major"]
       - dependency-name: react-flow-renderer
         update-types: ["version-update:semver-major"]
       - dependency-name: react

apps/account-ui/package.json

@@ -18,8 +18,7 @@
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.38.0",
     "react-i18next": "^12.0.0",
-    "react-router": "^6.4.3",
-    "react-router-dom": "^6.4.3"
+    "react-router-dom": "^6.6.2"
   },
   "devDependencies": {
     "@types/react": "^17.0.45",

apps/account-ui/src/root/ErrorPage.tsx

@@ -8,7 +8,7 @@ import {
   TextVariants,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import { useRouteError } from "react-router";
+import { useRouteError } from "react-router-dom";
 
 export const ErrorPage = () => {
   const { t } = useTranslation();

apps/account-ui/src/root/Root.tsx

@@ -6,7 +6,7 @@ import {
 } from "keycloak-masthead";
 import { Suspense, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Outlet } from "react-router";
+import { Outlet } from "react-router-dom";
 import { AlertProvider } from "../components/alerts/Alerts";
 
 import { environment } from "../environment";

apps/account-ui/src/routes.tsx

@@ -1,5 +1,5 @@
 import { lazy } from "react";
-import type { IndexRouteObject, RouteObject } from "react-router";
+import type { IndexRouteObject, RouteObject } from "react-router-dom";
 
 import { ErrorPage } from "./root/ErrorPage";
 import { Root } from "./root/Root";

apps/admin-ui/package.json

@@ -76,11 +76,9 @@
     "react-hook-form": "^6.15.8",
     "react-hook-form-v7": "npm:react-hook-form@^7.35.1",
     "react-i18next": "^12.0.0",
-    "react-router": "^5.3.4",
-    "react-router-dom": "^5.3.4",
-    "react-router-dom-v5-compat": "^6.6.1",
+    "react-router-dom": "^6.6.2",
     "react-use-localstorage": "^3.5.3",
-    "use-react-router-breadcrumbs": "^2.0.2"
+    "use-react-router-breadcrumbs": "^4.0.1"
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.2.3",
@@ -98,7 +96,6 @@
     "@types/lodash-es": "^4.17.6",
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.16",
-    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^2.2.0",
     "cypress": "^11.2.0",
     "del": "^7.0.0",

apps/admin-ui/src/App.tsx

@@ -1,29 +1,26 @@
-import { FunctionComponent, Suspense } from "react";
-import { Page } from "@patternfly/react-core";
-import { HashRouter as Router, Switch } from "react-router-dom";
-import { CompatRouter, CompatRoute } from "react-router-dom-v5-compat";
-import { ErrorBoundary } from "react-error-boundary";
-import type Keycloak from "keycloak-js";
 import type KeycloakAdminClient from "@keycloak/keycloak-admin-client";
+import { Page } from "@patternfly/react-core";
+import type Keycloak from "keycloak-js";
+import { FunctionComponent, Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { HashRouter as Router, Route, Routes } from "react-router-dom";
 
-import { Header } from "./PageHeader";
-import { PageNav } from "./PageNav";
-import { Help } from "./components/help-enabler/HelpHeader";
-
-import { ServerInfoProvider } from "./context/server-info/ServerInfoProvider";
 import { AlertProvider } from "./components/alert/Alerts";
-
-import { AccessContextProvider, useAccess } from "./context/access/Access";
-import { routes, RouteDef } from "./route-config";
 import { PageBreadCrumbs } from "./components/bread-crumb/PageBreadCrumbs";
+import { ErrorRenderer } from "./components/error/ErrorRenderer";
+import { Help } from "./components/help-enabler/HelpHeader";
 import { KeycloakSpinner } from "./components/keycloak-spinner/KeycloakSpinner";
+import { AccessContextProvider, useAccess } from "./context/access/Access";
+import { AdminClientContext } from "./context/auth/AdminClient";
+import { RealmContextProvider } from "./context/realm-context/RealmContext";
+import { RealmsProvider } from "./context/RealmsContext";
+import { ServerInfoProvider } from "./context/server-info/ServerInfoProvider";
+import { WhoAmIContextProvider } from "./context/whoami/WhoAmI";
 import { ForbiddenSection } from "./ForbiddenSection";
 import { SubGroups } from "./groups/SubGroupsContext";
-import { RealmsProvider } from "./context/RealmsContext";
-import { RealmContextProvider } from "./context/realm-context/RealmContext";
-import { ErrorRenderer } from "./components/error/ErrorRenderer";
-import { AdminClientContext } from "./context/auth/AdminClient";
-import { WhoAmIContextProvider } from "./context/whoami/WhoAmI";
+import { Header } from "./PageHeader";
+import { PageNav } from "./PageNav";
+import { RouteDef, routes } from "./route-config";
 
 export const mainPageContentId = "kc-main-content-page-container";
 
@@ -38,7 +35,6 @@ const AppContexts: FunctionComponent<AdminClientProps> = ({
   adminClient,
 }) => (
   <Router>
-    <CompatRouter>
     <AdminClientContext.Provider value={{ keycloak, adminClient }}>
       <WhoAmIContextProvider>
         <RealmsProvider>
@@ -54,7 +50,6 @@ const AppContexts: FunctionComponent<AdminClientProps> = ({
         </RealmsProvider>
       </WhoAmIContextProvider>
     </AdminClientContext.Provider>
-    </CompatRouter>
   </Router>
 );
 
@@ -96,17 +91,15 @@ export const App = ({ keycloak, adminClient }: AdminClientProps) => {
           }
         >
           <ServerInfoProvider>
-            <Switch>
+            <Routes>
               {routes.map((route, i) => (
-                <CompatRoute
+                <Route
                   key={i}
                   path={route.path}
-                  exact={route.matchOptions?.exact ?? true}
-                >
-                  <SecuredRoute route={route} />
-                </CompatRoute>
+                  element={<SecuredRoute route={route} />}
+                />
               ))}
-            </Switch>
+            </Routes>
           </ServerInfoProvider>
         </ErrorBoundary>
       </Page>

apps/admin-ui/src/PageHeader.tsx

@@ -14,7 +14,7 @@ import {
 import { HelpIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 import { HelpHeader, useHelp } from "./components/help-enabler/HelpHeader";
 import { useAdminClient } from "./context/auth/AdminClient";
 import { useRealm } from "./context/realm-context/RealmContext";

apps/admin-ui/src/PageNav.tsx

@@ -1,5 +1,5 @@
 import { FormEvent, FunctionComponent } from "react";
-import { NavLink, useMatch, useNavigate } from "react-router-dom-v5-compat";
+import { NavLink, useMatch, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   Nav,

apps/admin-ui/src/authentication/AuthenticationSection.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { sortBy } from "lodash-es";
 import {

apps/admin-ui/src/authentication/DuplicateFlowModal.tsx

@@ -10,7 +10,7 @@ import {
 import { useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom-v5-compat";
+import { useNavigate } from "react-router-dom";
 
 import { useAlerts } from "../components/alert/Alerts";
 import { useAdminClient } from "../context/auth/AdminClient";

apps/admin-ui/src/authentication/FlowDetails.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useParams, useNavigate } from "react-router-dom-v5-compat";
+import { useParams, useNavigate } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import {
   DataList,

apps/admin-ui/src/authentication/form/CreateFlow.tsx

@@ -7,7 +7,7 @@ import {
 } from "@patternfly/react-core";
 import { FormProvider, useForm } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 
 import { useAlerts } from "../../components/alert/Alerts";
 import { FormAccess } from "../../components/form-access/FormAccess";

apps/admin-ui/src/authentication/routes/Authentication.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type AuthenticationTab = "flows" | "required-actions" | "policies";

apps/admin-ui/src/authentication/routes/CreateFlow.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type CreateFlowParams = { realm: string };

apps/admin-ui/src/authentication/routes/Flow.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type FlowParams = {

apps/admin-ui/src/client-scopes/ClientScopesSection.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 import {
   AlertVariant,
   Button,

apps/admin-ui/src/client-scopes/CreateClientScope.tsx

@@ -1,6 +1,6 @@
 import { AlertVariant, PageSection } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom-v5-compat";
+import { useNavigate } from "react-router-dom";
 
 import { useAlerts } from "../components/alert/Alerts";
 import {

apps/admin-ui/src/client-scopes/EditClientScope.tsx

@@ -12,7 +12,7 @@ import {
 } from "@patternfly/react-core";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom-v5-compat";
+import { useNavigate } from "react-router-dom";
 import { useAlerts } from "../components/alert/Alerts";
 
 import {

apps/admin-ui/src/client-scopes/details/MapperList.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import type { Path } from "react-router-dom-v5-compat";
-import { Link } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { Dropdown, DropdownItem, DropdownToggle } from "@patternfly/react-core";
 import { CaretDownIcon } from "@patternfly/react-icons";
 

apps/admin-ui/src/client-scopes/details/MappingDetails.tsx

@@ -13,7 +13,7 @@ import {
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { Link, useMatch, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useMatch, useNavigate } from "react-router-dom";
 
 import { toClient } from "../../clients/routes/Client";
 import { useAlerts } from "../../components/alert/Alerts";

apps/admin-ui/src/client-scopes/details/ScopeForm.tsx

@@ -12,7 +12,7 @@ import {
 import { useEffect, useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 
 import { getProtocolName } from "../../clients/utils";
 import {

apps/admin-ui/src/client-scopes/routes/ClientScope.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type ClientScopeTab = "settings" | "mappers" | "scope";

apps/admin-ui/src/client-scopes/routes/ClientScopes.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type ClientScopesParams = { realm: string };

apps/admin-ui/src/client-scopes/routes/Mapper.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type MapperParams = {

apps/admin-ui/src/client-scopes/routes/NewClientScope.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type NewClientScopeParams = { realm: string };

apps/admin-ui/src/clients/ClientDetails.tsx

@@ -20,7 +20,7 @@ import {
   useWatch,
 } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom-v5-compat";
+import { useNavigate } from "react-router-dom";
 
 import { useAlerts } from "../components/alert/Alerts";
 import {

apps/admin-ui/src/clients/ClientsSection.tsx

@@ -13,7 +13,7 @@ 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 { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { formattedLinkTableCell } from "../components/external-link/FormattedLink";

apps/admin-ui/src/clients/add/NewClientForm.tsx

@@ -9,7 +9,7 @@ import {
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom-v5-compat";
+import { useNavigate } from "react-router-dom";
 
 import { useAlerts } from "../../components/alert/Alerts";
 import { FormAccess } from "../../components/form-access/FormAccess";

apps/admin-ui/src/clients/advanced/RevocationPanel.tsx

@@ -9,7 +9,7 @@ import {
 import { useEffect, useRef } from "react";
 import { useFormContext } from "react-hook-form-v7";
 import { Trans, useTranslation } from "react-i18next";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 
 import { useAlerts } from "../../components/alert/Alerts";
 import { FormAccess } from "../../components/form-access/FormAccess";

apps/admin-ui/src/clients/authorization/AuthorizationEvaluateResourcePolicies.tsx

@@ -11,7 +11,7 @@ import {
 import { ExpandableRowContent, Tbody, Td, Tr } from "@patternfly/react-table";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useParams } from "../../utils/useParams";

apps/admin-ui/src/clients/authorization/DetailDescription.tsx

@@ -4,7 +4,7 @@ import {
   DescriptionListTerm,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import { Link, Path } from "react-router-dom-v5-compat";
+import { Link, Path } from "react-router-dom";
 
 type DetailDescriptionProps<T> = {
   name: string;

apps/admin-ui/src/clients/authorization/EmptyPermissionsState.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom-v5-compat";
+import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   EmptyState,

apps/admin-ui/src/clients/authorization/PermissionDetails.tsx

@@ -20,7 +20,7 @@ import {
   useWatch,
 } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";

apps/admin-ui/src/clients/authorization/Permissions.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   Alert,

apps/admin-ui/src/clients/authorization/Policies.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   Alert,

apps/admin-ui/src/clients/authorization/ResourceDetails.tsx

@@ -16,7 +16,7 @@ import {
 import { useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";

apps/admin-ui/src/clients/authorization/Resources.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   Alert,

apps/admin-ui/src/clients/authorization/ScopeDetails.tsx

@@ -12,7 +12,7 @@ import {
 import { useState } from "react";
 import { useForm } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 
 import { useAlerts } from "../../components/alert/Alerts";
 import { FormAccess } from "../../components/form-access/FormAccess";

apps/admin-ui/src/clients/authorization/Scopes.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   Button,

apps/admin-ui/src/clients/authorization/policy/PolicyDetails.tsx

@@ -10,7 +10,7 @@ import {
 import { FunctionComponent, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 
 import { useAlerts } from "../../../components/alert/Alerts";
 import { useConfirmDialog } from "../../../components/confirm-dialog/ConfirmDialog";

apps/admin-ui/src/clients/import/ImportForm.tsx

@@ -9,7 +9,7 @@ import {
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
 

apps/admin-ui/src/clients/initial-access/CreateInitialAccessToken.tsx

@@ -15,7 +15,7 @@ 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, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useAlerts } from "../../components/alert/Alerts";

apps/admin-ui/src/clients/initial-access/InitialAccessTokenList.tsx

@@ -3,7 +3,7 @@ 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, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";

apps/admin-ui/src/clients/roles/CreateClientRole.tsx

@@ -2,7 +2,7 @@ import type RoleRepresentation from "@keycloak/keycloak-admin-client/lib/defs/ro
 import { AlertVariant } from "@patternfly/react-core";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useParams } from "react-router-dom-v5-compat";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { useAlerts } from "../../components/alert/Alerts";
 import { AttributeForm } from "../../components/key-value-form/AttributeForm";

apps/admin-ui/src/clients/routes/AddClient.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type AddClientParams = { realm: string };

apps/admin-ui/src/clients/routes/AuthenticationTab.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type AuthorizationTab =

apps/admin-ui/src/clients/routes/Client.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type ClientTab =

apps/admin-ui/src/clients/routes/ClientRole.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type ClientRoleTab =

apps/admin-ui/src/clients/routes/ClientScopeTab.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type ClientScopesTab = "setup" | "evaluate";

apps/admin-ui/src/clients/routes/Clients.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type ClientsTab = "list" | "initial-access-token";

apps/admin-ui/src/clients/routes/CreateInitialAccessToken.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type CreateInitialAccessTokenParams = { realm: string };

apps/admin-ui/src/clients/routes/DedicatedScopeDetails.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type DedicatedScopeTab = "mappers" | "scope";

apps/admin-ui/src/clients/routes/ImportClient.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type ImportClientParams = { realm: string };

apps/admin-ui/src/clients/routes/Mapper.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type MapperParams = {

apps/admin-ui/src/clients/routes/NewPermission.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type PermissionType = "resource" | "scope";

apps/admin-ui/src/clients/routes/NewPolicy.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type NewPolicyParams = { realm: string; id: string; policyType: string };

apps/admin-ui/src/clients/routes/NewResource.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type NewResourceParams = { realm: string; id: string };

apps/admin-ui/src/clients/routes/NewRole.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type NewRoleParams = { realm: string; clientId: string };

apps/admin-ui/src/clients/routes/NewScope.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type NewScopeParams = { realm: string; id: string };

apps/admin-ui/src/clients/routes/PermissionDetails.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 import type { PermissionType } from "./NewPermission";
 

apps/admin-ui/src/clients/routes/PolicyDetails.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type PolicyDetailsParams = {

apps/admin-ui/src/clients/routes/Resource.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type ResourceDetailsParams = {

apps/admin-ui/src/clients/routes/Scope.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type ScopeDetailsParams = {

apps/admin-ui/src/clients/scopes/ClientScopes.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   AlertVariant,

apps/admin-ui/src/clients/scopes/DedicatedScopes.tsx

@@ -9,7 +9,7 @@ import {
 } from "@patternfly/react-core";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom-v5-compat";
+import { useNavigate } from "react-router-dom";
 
 import { MapperList } from "../../client-scopes/details/MapperList";
 import { useAlerts } from "../../components/alert/Alerts";

apps/admin-ui/src/clients/service-account/ServiceAccount.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { AlertVariant, PageSection } from "@patternfly/react-core";
 import { InfoCircleIcon } from "@patternfly/react-icons";

apps/admin-ui/src/components/bread-crumb/GroupBreadCrumbs.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Link, useLocation } from "react-router-dom-v5-compat";
+import { Link, useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core";
 

apps/admin-ui/src/components/bread-crumb/PageBreadCrumbs.tsx

@@ -1,12 +1,12 @@
+import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core";
+import { uniqBy } from "lodash-es";
 import { isValidElement } from "react";
-import { Link } from "react-router-dom-v5-compat";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 import useBreadcrumbs, {
   BreadcrumbData,
   BreadcrumbsRoute,
 } from "use-react-router-breadcrumbs";
-import { useTranslation } from "react-i18next";
-import { uniqBy } from "lodash-es";
-import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core";
 
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { routes } from "../../route-config";
@@ -34,7 +34,7 @@ export const PageBreadCrumbs = () => {
       {crumbs.map(({ match, breadcrumb: crumb }, i) => (
         <BreadcrumbItem key={i} isActive={crumbs.length - 1 === i}>
           {crumbs.length - 1 !== i ? (
-            <Link to={match.url}>{crumb}</Link>
+            <Link to={match.pathname}>{crumb}</Link>
           ) : (
             crumb
           )}

apps/admin-ui/src/components/keycloak-card/KeycloakCard.tsx

@@ -11,7 +11,7 @@ import {
   Label,
 } from "@patternfly/react-core";
 import { ReactElement, useState } from "react";
-import { To, useNavigate } from "react-router-dom-v5-compat";
+import { To, useNavigate } from "react-router-dom";
 import { ClickableCard } from "./ClickableCard";
 
 import "./keycloak-card.css";

apps/admin-ui/src/components/permission-tab/PermissionTab.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import {
   Card,

apps/admin-ui/src/components/realm-selector/RealmSelector.tsx

@@ -14,7 +14,7 @@ import {
 import { CheckIcon } from "@patternfly/react-icons";
 import { Fragment, ReactElement, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom-v5-compat";
+import { useNavigate } from "react-router-dom";
 
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useRealms } from "../../context/RealmsContext";

apps/admin-ui/src/components/role-form/RoleForm.tsx

@@ -7,7 +7,7 @@ import {
 } from "@patternfly/react-core";
 import { SubmitHandler, useWatch, UseFormMethods } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { Link, To } from "react-router-dom-v5-compat";
+import { Link, To } from "react-router-dom";
 
 import { FormAccess } from "../form-access/FormAccess";
 import { AttributeForm } from "../key-value-form/AttributeForm";

apps/admin-ui/src/components/roles-list/RolesList.tsx

@@ -3,7 +3,7 @@ import type RoleRepresentation from "@keycloak/keycloak-admin-client/lib/defs/ro
 import { AlertVariant, Button, ButtonVariant } from "@patternfly/react-core";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, To, useNavigate } from "react-router-dom-v5-compat";
+import { Link, To, useNavigate } from "react-router-dom";
 
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useRealm } from "../../context/realm-context/RealmContext";

apps/admin-ui/src/components/routable-tabs/RoutableTabs.tsx

@@ -10,7 +10,7 @@ import {
   JSXElementConstructor,
   ReactElement,
 } from "react";
-import { Path, useHref, useLocation } from "react-router-dom-v5-compat";
+import { Path, useHref, useLocation } from "react-router-dom";
 
 // TODO: Remove the custom 'children' props and type once the following issue has been resolved:
 // https://github.com/patternfly/patternfly-react/issues/6766

apps/admin-ui/src/context/realm-context/RealmContext.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useEffect, useMemo } from "react";
-import { useMatch } from "react-router-dom-v5-compat";
+import { useMatch } from "react-router-dom";
 
 import { RecentUsed } from "../../components/realm-selector/recent-used";
 import { DashboardRouteWithRealm } from "../../dashboard/routes/Dashboard";

apps/admin-ui/src/dashboard/routes/Dashboard.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type DashboardTab = "info" | "providers";

apps/admin-ui/src/events/EventsSection.tsx

@@ -31,7 +31,7 @@ import { pickBy } from "lodash-es";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form-v7";
 import { Trans, useTranslation } from "react-i18next";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 
 import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";

apps/admin-ui/src/events/ResourceLinks.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 import { Tooltip } from "@patternfly/react-core";
 
 import type AdminEventRepresentation from "@keycloak/keycloak-admin-client/lib/defs/adminEventRepresentation";

apps/admin-ui/src/events/routes/Events.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type EventsTab = "user-events" | "admin-events";

apps/admin-ui/src/groups/GroupAttributes.tsx

@@ -20,7 +20,7 @@ import { useAdminClient } from "../context/auth/AdminClient";
 
 import { getLastId } from "./groupIdUtils";
 import { useSubGroups } from "./SubGroupsContext";
-import { useLocation } from "react-router-dom-v5-compat";
+import { useLocation } from "react-router-dom";
 
 export const GroupAttributes = () => {
   const { t } = useTranslation("groups");

apps/admin-ui/src/groups/GroupTable.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { SearchInput, ToolbarItem } from "@patternfly/react-core";
 

apps/admin-ui/src/groups/GroupsSection.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom-v5-compat";
+import { useLocation, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   DropdownItem,

apps/admin-ui/src/groups/Members.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link, useLocation } from "react-router-dom-v5-compat";
+import { Link, useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { uniqBy } from "lodash-es";
 import {

apps/admin-ui/src/groups/components/GroupTree.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link } from "react-router-dom-v5-compat";
+import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   Checkbox,

apps/admin-ui/src/groups/routes/Groups.tsx

@@ -1,17 +1,14 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type GroupsParams = { realm: string; id?: string };
 
 export const GroupsRoute: RouteDef = {
-  path: "/:realm/groups",
+  path: "/:realm/groups*",
   component: lazy(() => import("../GroupsSection")),
   access: "query-groups",
-  matchOptions: {
-    exact: false,
-  },
 };
 
 export const GroupsWithIdRoute: RouteDef = {

apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useState } from "react";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { sortBy, groupBy } from "lodash-es";
 import {

apps/admin-ui/src/identity-providers/add/AddIdentityProvider.tsx

@@ -7,7 +7,7 @@ import {
 } from "@patternfly/react-core";
 import { FormProvider, useForm } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 
 import { useAlerts } from "../../components/alert/Alerts";
 import { FormAccess } from "../../components/form-access/FormAccess";

apps/admin-ui/src/identity-providers/add/AddMapper.tsx

@@ -14,7 +14,7 @@ import {
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";

apps/admin-ui/src/identity-providers/add/AddOpenIdConnect.tsx

@@ -7,7 +7,7 @@ import {
 } from "@patternfly/react-core";
 import { FormProvider, useForm } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { Link, useLocation, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 
 import { useAlerts } from "../../components/alert/Alerts";
 import { FormAccess } from "../../components/form-access/FormAccess";

apps/admin-ui/src/identity-providers/add/AddSamlConnect.tsx

@@ -6,7 +6,7 @@ import {
 } from "@patternfly/react-core";
 import { FormProvider, useForm } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 
 import type IdentityProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderRepresentation";
 import { useAlerts } from "../../components/alert/Alerts";

apps/admin-ui/src/identity-providers/add/DetailSettings.tsx

@@ -16,7 +16,7 @@ import {
 import { useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom-v5-compat";
+import { Link, useNavigate } from "react-router-dom";
 
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";

apps/admin-ui/src/identity-providers/add/OIDCGeneralSettings.tsx

@@ -1,7 +1,7 @@
 import { FormGroup, ValidatedOptions } from "@patternfly/react-core";
 import { useFormContext } from "react-hook-form-v7";
 import { useTranslation } from "react-i18next";
-import { useParams } from "react-router-dom-v5-compat";
+import { useParams } from "react-router-dom";
 
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";

apps/admin-ui/src/identity-providers/routes/AddMapper.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type IdentityProviderAddMapperParams = {

apps/admin-ui/src/identity-providers/routes/EditMapper.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type IdentityProviderEditMapperParams = {

apps/admin-ui/src/identity-providers/routes/IdentityProvider.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type IdentityProviderTab = "settings" | "mappers" | "permissions";

apps/admin-ui/src/identity-providers/routes/IdentityProviderCreate.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type IdentityProviderCreateParams = {

apps/admin-ui/src/identity-providers/routes/IdentityProviderKeycloakOidc.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type IdentityProviderKeycloakOidcParams = { realm: string };

apps/admin-ui/src/identity-providers/routes/IdentityProviderOidc.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type IdentityProviderOidcParams = { realm: string };

apps/admin-ui/src/identity-providers/routes/IdentityProviderSaml.ts

@@ -1,6 +1,6 @@
 import { lazy } from "react";
-import type { Path } from "react-router-dom-v5-compat";
-import { generatePath } from "react-router-dom-v5-compat";
+import type { Path } from "react-router-dom";
+import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
 export type IdentityProviderSamlParams = { realm: string };