Align route definitions with React Router's element (#19316)

js/apps/admin-ui/src/App.tsx

@@ -67,11 +67,7 @@ const SecuredRoute = ({ route }: SecuredRouteProps) => {
       : hasAccess(route.access);
 
   if (accessAllowed)
-    return (
+    return <Suspense fallback={<KeycloakSpinner />}>{route.element}</Suspense>;
-      <Suspense fallback={<KeycloakSpinner />}>
-        <route.component />
-      </Suspense>
-    );
 
   return <ForbiddenSection permissionNeeded={route.access} />;
 };

js/apps/admin-ui/src/authentication/routes/Authentication.tsx

@@ -7,9 +7,11 @@ export type AuthenticationTab = "flows" | "required-actions" | "policies";
 
 export type AuthenticationParams = { realm: string; tab?: AuthenticationTab };
 
+const AuthenticationSection = lazy(() => import("../AuthenticationSection"));
+
 export const AuthenticationRoute: RouteDef = {
   path: "/:realm/authentication",
-  component: lazy(() => import("../AuthenticationSection")),
+  element: <AuthenticationSection />,
   breadcrumb: (t) => t("authentication"),
   access: ["view-realm", "view-identity-providers", "view-clients"],
 };

js/apps/admin-ui/src/authentication/routes/CreateFlow.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type CreateFlowParams = { realm: string };
 
+const CreateFlow = lazy(() => import("../form/CreateFlow"));
+
 export const CreateFlowRoute: RouteDef = {
   path: "/:realm/authentication/flows/create",
-  component: lazy(() => import("../form/CreateFlow")),
+  element: <CreateFlow />,
   breadcrumb: (t) => t("authentication:createFlow"),
   access: "manage-authorization",
 };

js/apps/admin-ui/src/authentication/routes/Flow.tsx

@@ -10,9 +10,11 @@ export type FlowParams = {
   builtIn?: string;
 };
 
+const FlowDetails = lazy(() => import("../FlowDetails"));
+
 export const FlowRoute: RouteDef = {
   path: "/:realm/authentication/:id/:usedBy",
-  component: lazy(() => import("../FlowDetails")),
+  element: <FlowDetails />,
   breadcrumb: (t) => t("authentication:flowDetails"),
   access: "view-authorization",
 };

js/apps/admin-ui/src/client-scopes/routes/ClientScope.tsx

@@ -11,9 +11,11 @@ export type ClientScopeParams = {
   tab: ClientScopeTab;
 };
 
+const EditClientScope = lazy(() => import("../EditClientScope"));
+
 export const ClientScopeRoute: RouteDef = {
   path: "/:realm/client-scopes/:id/:tab",
-  component: lazy(() => import("../EditClientScope")),
+  element: <EditClientScope />,
   breadcrumb: (t) => t("client-scopes:clientScopeDetails"),
   access: "view-clients",
 };

js/apps/admin-ui/src/client-scopes/routes/ClientScopes.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type ClientScopesParams = { realm: string };
 
+const ClientScopesSection = lazy(() => import("../ClientScopesSection"));
+
 export const ClientScopesRoute: RouteDef = {
   path: "/:realm/client-scopes",
-  component: lazy(() => import("../ClientScopesSection")),
+  element: <ClientScopesSection />,
   breadcrumb: (t) => t("client-scopes:clientScopeList"),
   access: "view-clients",
 };

js/apps/admin-ui/src/client-scopes/routes/Mapper.tsx

@@ -9,9 +9,11 @@ export type MapperParams = {
   mapperId: string;
 };
 
+const MappingDetails = lazy(() => import("../details/MappingDetails"));
+
 export const MapperRoute: RouteDef = {
   path: "/:realm/client-scopes/:id/mappers/:mapperId",
-  component: lazy(() => import("../details/MappingDetails")),
+  element: <MappingDetails />,
   breadcrumb: (t) => t("common:mappingDetails"),
   access: "view-clients",
 };

js/apps/admin-ui/src/client-scopes/routes/NewClientScope.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type NewClientScopeParams = { realm: string };
 
+const CreateClientScope = lazy(() => import("../CreateClientScope"));
+
 export const NewClientScopeRoute: RouteDef = {
   path: "/:realm/client-scopes/new",
-  component: lazy(() => import("../CreateClientScope")),
+  element: <CreateClientScope />,
   breadcrumb: (t) => t("client-scopes:createClientScope"),
   access: "manage-clients",
 };

js/apps/admin-ui/src/clients/routes/AddClient.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type AddClientParams = { realm: string };
 
+const NewClientForm = lazy(() => import("../add/NewClientForm"));
+
 export const AddClientRoute: RouteDef = {
   path: "/:realm/clients/add-client",
-  component: lazy(() => import("../add/NewClientForm")),
+  element: <NewClientForm />,
   breadcrumb: (t) => t("clients:createClient"),
   access: "manage-clients",
 };

js/apps/admin-ui/src/clients/routes/AddRegistrationProvider.tsx

@@ -11,9 +11,11 @@ export type RegistrationProviderParams = {
   providerId: string;
 };
 
+const DetailProvider = lazy(() => import("../registration/DetailProvider"));
+
 export const AddRegistrationProviderRoute: RouteDef = {
   path: "/:realm/clients/client-registration/:subTab/:providerId",
-  component: lazy(() => import("../registration/DetailProvider")),
+  element: <DetailProvider />,
   breadcrumb: (t) => t("clients:clientSettings"),
   access: "manage-clients",
 };

js/apps/admin-ui/src/clients/routes/AuthenticationTab.tsx

@@ -17,9 +17,12 @@ export type AuthorizationParams = {
   clientId: string;
   tab: AuthorizationTab;
 };
+
+const ClientDetails = lazy(() => import("../ClientDetails"));
+
 export const AuthorizationRoute: RouteDef = {
   path: "/:realm/clients/:clientId/authorization/:tab",
-  component: lazy(() => import("../ClientDetails")),
+  element: <ClientDetails />,
   breadcrumb: (t) => t("clients:clientSettings"),
   access: "view-clients",
 };

js/apps/admin-ui/src/clients/routes/Client.tsx

@@ -22,9 +22,11 @@ export type ClientParams = {
   tab: ClientTab;
 };
 
+const ClientDetails = lazy(() => import("../ClientDetails"));
+
 export const ClientRoute: RouteDef = {
   path: "/:realm/clients/:clientId/:tab",
-  component: lazy(() => import("../ClientDetails")),
+  element: <ClientDetails />,
   breadcrumb: (t) => t("clients:clientSettings"),
   access: "query-clients",
 };

js/apps/admin-ui/src/clients/routes/ClientRegistration.tsx

@@ -10,9 +10,11 @@ export type ClientRegistrationParams = {
   subTab: ClientRegistrationTab;
 };
 
+const ClientsSection = lazy(() => import("../ClientsSection"));
+
 export const ClientRegistrationRoute: RouteDef = {
   path: "/:realm/clients/client-registration/:subTab",
-  component: lazy(() => import("../ClientsSection")),
+  element: <ClientsSection />,
   breadcrumb: (t) => t("clients:clientRegistration"),
   access: "view-clients",
 };

js/apps/admin-ui/src/clients/routes/ClientRole.tsx

@@ -16,9 +16,11 @@ export type ClientRoleParams = {
   tab: ClientRoleTab;
 };
 
+const RealmRoleTabs = lazy(() => import("../../realm-roles/RealmRoleTabs"));
+
 export const ClientRoleRoute: RouteDef = {
   path: "/:realm/clients/:clientId/roles/:id/:tab" as const,
-  component: lazy(() => import("../../realm-roles/RealmRoleTabs")),
+  element: <RealmRoleTabs />,
   breadcrumb: (t) => t("roles:roleDetails"),
   access: "view-realm",
 } satisfies RouteDef;

js/apps/admin-ui/src/clients/routes/ClientScopeTab.tsx

@@ -11,9 +11,11 @@ export type ClientScopesParams = {
   tab: ClientScopesTab;
 };
 
+const ClientDetails = lazy(() => import("../ClientDetails"));
+
 export const ClientScopesRoute: RouteDef = {
   path: "/:realm/clients/:clientId/clientScopes/:tab",
-  component: lazy(() => import("../ClientDetails")),
+  element: <ClientDetails />,
   breadcrumb: (t) => t("clients:clientSettings"),
   access: "view-clients",
 };

js/apps/admin-ui/src/clients/routes/Clients.tsx

@@ -13,9 +13,11 @@ export type ClientsParams = {
   tab?: ClientsTab;
 };
 
+const ClientsSection = lazy(() => import("../ClientsSection"));
+
 export const ClientsRoute: RouteDef = {
   path: "/:realm/clients",
-  component: lazy(() => import("../ClientsSection")),
+  element: <ClientsSection />,
   breadcrumb: (t) => t("clients:clientList"),
   access: "query-clients",
 };

js/apps/admin-ui/src/clients/routes/CreateInitialAccessToken.tsx

@@ -5,9 +5,13 @@ import type { RouteDef } from "../../route-config";
 
 export type CreateInitialAccessTokenParams = { realm: string };
 
+const CreateInitialAccessToken = lazy(
+  () => import("../initial-access/CreateInitialAccessToken")
+);
+
 export const CreateInitialAccessTokenRoute: RouteDef = {
   path: "/:realm/clients/initialAccessToken/create",
-  component: lazy(() => import("../initial-access/CreateInitialAccessToken")),
+  element: <CreateInitialAccessToken />,
   breadcrumb: (t) => t("clients:createToken"),
   access: "manage-clients",
 };

js/apps/admin-ui/src/clients/routes/DedicatedScopeDetails.tsx

@@ -11,9 +11,11 @@ export type DedicatedScopeDetailsParams = {
   tab?: DedicatedScopeTab;
 };
 
+const DedicatedScopes = lazy(() => import("../scopes/DedicatedScopes"));
+
 export const DedicatedScopeDetailsRoute: RouteDef = {
   path: "/:realm/clients/:clientId/clientScopes/dedicated",
-  component: lazy(() => import("../scopes/DedicatedScopes")),
+  element: <DedicatedScopes />,
   breadcrumb: (t) => t("clients:dedicatedScopes"),
   access: "view-clients",
 };

js/apps/admin-ui/src/clients/routes/ImportClient.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type ImportClientParams = { realm: string };
 
+const ImportForm = lazy(() => import("../import/ImportForm"));
+
 export const ImportClientRoute: RouteDef = {
   path: "/:realm/clients/import-client",
-  component: lazy(() => import("../import/ImportForm")),
+  element: <ImportForm />,
   breadcrumb: (t) => t("clients:importClient"),
   access: "manage-clients",
 };

js/apps/admin-ui/src/clients/routes/Mapper.tsx

@@ -9,9 +9,13 @@ export type MapperParams = {
   mapperId: string;
 };
 
+const MappingDetails = lazy(
+  () => import("../../client-scopes/details/MappingDetails")
+);
+
 export const MapperRoute: RouteDef = {
   path: "/:realm/clients/:id/clientScopes/dedicated/mappers/:mapperId",
-  component: lazy(() => import("../../client-scopes/details/MappingDetails")),
+  element: <MappingDetails />,
   breadcrumb: (t) => t("common:mappingDetails"),
   access: "view-clients",
 };

js/apps/admin-ui/src/clients/routes/NewPermission.tsx

@@ -12,9 +12,13 @@ export type NewPermissionParams = {
   selectedId?: string;
 };
 
+const PermissionDetails = lazy(
+  () => import("../authorization/PermissionDetails")
+);
+
 export const NewPermissionRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/permission/new/:permissionType",
-  component: lazy(() => import("../authorization/PermissionDetails")),
+  element: <PermissionDetails />,
   breadcrumb: (t) => t("clients:createPermission"),
   access: "view-clients",
 };

js/apps/admin-ui/src/clients/routes/NewPolicy.tsx

@@ -5,9 +5,13 @@ import type { RouteDef } from "../../route-config";
 
 export type NewPolicyParams = { realm: string; id: string; policyType: string };
 
+const PolicyDetails = lazy(
+  () => import("../authorization/policy/PolicyDetails")
+);
+
 export const NewPolicyRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/policy/new/:policyType",
-  component: lazy(() => import("../authorization/policy/PolicyDetails")),
+  element: <PolicyDetails />,
   breadcrumb: (t) => t("clients:createPolicy"),
   access: "view-clients",
 };

js/apps/admin-ui/src/clients/routes/NewResource.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type NewResourceParams = { realm: string; id: string };
 
+const ResourceDetails = lazy(() => import("../authorization/ResourceDetails"));
+
 export const NewResourceRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/resource/new",
-  component: lazy(() => import("../authorization/ResourceDetails")),
+  element: <ResourceDetails />,
   breadcrumb: (t) => t("clients:createResource"),
   access: "view-clients",
 };

js/apps/admin-ui/src/clients/routes/NewRole.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type NewRoleParams = { realm: string; clientId: string };
 
+const CreateClientRole = lazy(() => import("../roles/CreateClientRole"));
+
 export const NewRoleRoute: RouteDef = {
   path: "/:realm/clients/:clientId/roles/new",
-  component: lazy(() => import("../roles/CreateClientRole")),
+  element: <CreateClientRole />,
   breadcrumb: (t) => t("roles:createRole"),
   access: "manage-clients",
 };

js/apps/admin-ui/src/clients/routes/NewScope.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type NewScopeParams = { realm: string; id: string };
 
+const ScopeDetails = lazy(() => import("../authorization/ScopeDetails"));
+
 export const NewScopeRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/scope/new",
-  component: lazy(() => import("../authorization/ScopeDetails")),
+  element: <ScopeDetails />,
   breadcrumb: (t) => t("clients:createAuthorizationScope"),
   access: "view-clients",
 };

js/apps/admin-ui/src/clients/routes/PermissionDetails.tsx

@@ -11,9 +11,13 @@ export type PermissionDetailsParams = {
   permissionId: string;
 };
 
+const PermissionDetails = lazy(
+  () => import("../authorization/PermissionDetails")
+);
+
 export const PermissionDetailsRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/permission/:permissionType/:permissionId",
-  component: lazy(() => import("../authorization/PermissionDetails")),
+  element: <PermissionDetails />,
   breadcrumb: (t) => t("clients:permissionDetails"),
   access: "view-clients",
 };

js/apps/admin-ui/src/clients/routes/PolicyDetails.tsx

@@ -10,9 +10,13 @@ export type PolicyDetailsParams = {
   policyType: string;
 };
 
+const PolicyDetails = lazy(
+  () => import("../authorization/policy/PolicyDetails")
+);
+
 export const PolicyDetailsRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/policy/:policyId/:policyType",
-  component: lazy(() => import("../authorization/policy/PolicyDetails")),
+  element: <PolicyDetails />,
   breadcrumb: (t) => t("clients:createPolicy"),
   access: "view-clients",
 };

js/apps/admin-ui/src/clients/routes/Resource.tsx

@@ -9,9 +9,11 @@ export type ResourceDetailsParams = {
   resourceId?: string;
 };
 
+const ResourceDetails = lazy(() => import("../authorization/ResourceDetails"));
+
 export const ResourceDetailsRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/resource",
-  component: lazy(() => import("../authorization/ResourceDetails")),
+  element: <ResourceDetails />,
   breadcrumb: (t) => t("clients:createResource"),
   access: "view-clients",
 };

js/apps/admin-ui/src/clients/routes/Scope.tsx

@@ -9,9 +9,11 @@ export type ScopeDetailsParams = {
   scopeId?: string;
 };
 
+const ScopeDetails = lazy(() => import("../authorization/ScopeDetails"));
+
 export const ScopeDetailsRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/scope",
-  component: lazy(() => import("../authorization/ScopeDetails")),
+  element: <ScopeDetails />,
   breadcrumb: (t) => t("clients:createAuthorizationScope"),
   access: "manage-clients",
 };

js/apps/admin-ui/src/dashboard/routes/Dashboard.tsx

@@ -7,9 +7,11 @@ export type DashboardTab = "info" | "providers";
 
 export type DashboardParams = { realm?: string; tab?: DashboardTab };
 
+const Dashboard = lazy(() => import("../Dashboard"));
+
 export const DashboardRoute: RouteDef = {
   path: "/",
-  component: lazy(() => import("../Dashboard")),
+  element: <Dashboard />,
   breadcrumb: (t) => t("common:home"),
   access: "anyone",
 };

js/apps/admin-ui/src/events/routes/Events.tsx

@@ -10,9 +10,11 @@ export type EventsParams = {
   tab?: EventsTab;
 };
 
+const EventsSection = lazy(() => import("../EventsSection"));
+
 export const EventsRoute: RouteDef = {
   path: "/:realm/events",
-  component: lazy(() => import("../EventsSection")),
+  element: <EventsSection />,
   breadcrumb: (t) => t("events:title"),
   access: "view-events",
 };

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

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type GroupsParams = { realm: string; id?: string };
 
+const GroupsSection = lazy(() => import("../GroupsSection"));
+
 export const GroupsRoute: RouteDef = {
   path: "/:realm/groups/*",
-  component: lazy(() => import("../GroupsSection")),
+  element: <GroupsSection />,
   access: "query-groups",
 };
 

js/apps/admin-ui/src/identity-providers/routes/AddMapper.tsx

@@ -10,9 +10,11 @@ export type IdentityProviderAddMapperParams = {
   tab: string;
 };
 
+const AddMapper = lazy(() => import("../add/AddMapper"));
+
 export const IdentityProviderAddMapperRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/:alias/:tab/create",
-  component: lazy(() => import("../add/AddMapper")),
+  element: <AddMapper />,
   access: "manage-identity-providers",
   breadcrumb: (t) => t("identity-providers:addIdPMapper"),
 };

js/apps/admin-ui/src/identity-providers/routes/EditMapper.tsx

@@ -10,9 +10,11 @@ export type IdentityProviderEditMapperParams = {
   id: string;
 };
 
+const AddMapper = lazy(() => import("../add/AddMapper"));
+
 export const IdentityProviderEditMapperRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/:alias/mappers/:id",
-  component: lazy(() => import("../add/AddMapper")),
+  element: <AddMapper />,
   access: "manage-identity-providers",
   breadcrumb: (t) => t("identity-providers:editIdPMapper"),
 };

js/apps/admin-ui/src/identity-providers/routes/IdentityProvider.tsx

@@ -12,9 +12,11 @@ export type IdentityProviderParams = {
   tab: IdentityProviderTab;
 };
 
+const DetailSettings = lazy(() => import("../add/DetailSettings"));
+
 export const IdentityProviderRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/:alias/:tab",
-  component: lazy(() => import("../add/DetailSettings")),
+  element: <DetailSettings />,
   breadcrumb: (t) => t("identity-providers:providerDetails"),
   access: "view-identity-providers",
 };

js/apps/admin-ui/src/identity-providers/routes/IdentityProviderCreate.tsx

@@ -8,9 +8,11 @@ export type IdentityProviderCreateParams = {
   providerId: string;
 };
 
+const AddIdentityProvider = lazy(() => import("../add/AddIdentityProvider"));
+
 export const IdentityProviderCreateRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/add",
-  component: lazy(() => import("../add/AddIdentityProvider")),
+  element: <AddIdentityProvider />,
   breadcrumb: (t) => t("identity-providers:addProvider"),
   access: "manage-identity-providers",
 };

js/apps/admin-ui/src/identity-providers/routes/IdentityProviderKeycloakOidc.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type IdentityProviderKeycloakOidcParams = { realm: string };
 
+const AddOpenIdConnect = lazy(() => import("../add/AddOpenIdConnect"));
+
 export const IdentityProviderKeycloakOidcRoute: RouteDef = {
   path: "/:realm/identity-providers/keycloak-oidc/add",
-  component: lazy(() => import("../add/AddOpenIdConnect")),
+  element: <AddOpenIdConnect />,
   breadcrumb: (t) => t("identity-providers:addKeycloakOpenIdProvider"),
   access: "manage-identity-providers",
 };

js/apps/admin-ui/src/identity-providers/routes/IdentityProviderOidc.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type IdentityProviderOidcParams = { realm: string };
 
+const AddOpenIdConnect = lazy(() => import("../add/AddOpenIdConnect"));
+
 export const IdentityProviderOidcRoute: RouteDef = {
   path: "/:realm/identity-providers/oidc/add",
-  component: lazy(() => import("../add/AddOpenIdConnect")),
+  element: <AddOpenIdConnect />,
   breadcrumb: (t) => t("identity-providers:addOpenIdProvider"),
   access: "manage-identity-providers",
 };

js/apps/admin-ui/src/identity-providers/routes/IdentityProviderSaml.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type IdentityProviderSamlParams = { realm: string };
 
+const AddSamlConnect = lazy(() => import("../add/AddSamlConnect"));
+
 export const IdentityProviderSamlRoute: RouteDef = {
   path: "/:realm/identity-providers/saml/add",
-  component: lazy(() => import("../add/AddSamlConnect")),
+  element: <AddSamlConnect />,
   breadcrumb: (t) => t("identity-providers:addSamlProvider"),
   access: "manage-identity-providers",
 };

js/apps/admin-ui/src/identity-providers/routes/IdentityProviders.tsx

@@ -5,9 +5,13 @@ import type { RouteDef } from "../../route-config";
 
 export type IdentityProvidersParams = { realm: string };
 
+const IdentityProvidersSection = lazy(
+  () => import("../IdentityProvidersSection")
+);
+
 export const IdentityProvidersRoute: RouteDef = {
   path: "/:realm/identity-providers",
-  component: lazy(() => import("../IdentityProvidersSection")),
+  element: <IdentityProvidersSection />,
   breadcrumb: (t) => t("identityProviders"),
   access: "view-identity-providers",
 };

js/apps/admin-ui/src/realm-roles/routes/AddRole.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type AddRoleParams = { realm: string };
 
+const CreateRealmRole = lazy(() => import("../CreateRealmRole"));
+
 export const AddRoleRoute: RouteDef = {
   path: "/:realm/roles/new",
-  component: lazy(() => import("../CreateRealmRole")),
+  element: <CreateRealmRole />,
   breadcrumb: (t) => t("roles:createRole"),
   access: "manage-realm",
 };

js/apps/admin-ui/src/realm-roles/routes/RealmRole.tsx

@@ -17,9 +17,11 @@ export type RealmRoleParams = {
   tab: RealmRoleTab;
 };
 
+const RealmRoleTabs = lazy(() => import("../RealmRoleTabs"));
+
 export const RealmRoleRoute: RouteDef = {
   path: "/:realm/roles/:id/:tab",
-  component: lazy(() => import("../RealmRoleTabs")),
+  element: <RealmRoleTabs />,
   breadcrumb: (t) => t("roles:roleDetails"),
   access: ["view-realm", "view-users"],
 };

js/apps/admin-ui/src/realm-roles/routes/RealmRoles.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type RealmRolesParams = { realm: string };
 
+const RealmRolesSection = lazy(() => import("../RealmRolesSection"));
+
 export const RealmRolesRoute: RouteDef = {
   path: "/:realm/roles",
-  component: lazy(() => import("../RealmRolesSection")),
+  element: <RealmRolesSection />,
   breadcrumb: (t) => t("roles:realmRolesList"),
   access: "view-realm",
 };

js/apps/admin-ui/src/realm-settings/routes/AddAttribute.tsx

@@ -7,9 +7,11 @@ export type AddAttributeParams = {
   realm: string;
 };
 
+const NewAttributeSettings = lazy(() => import("../NewAttributeSettings"));
+
 export const AddAttributeRoute: RouteDef = {
   path: "/:realm/realm-settings/user-profile/attributes/add-attribute",
-  component: lazy(() => import("../NewAttributeSettings")),
+  element: <NewAttributeSettings />,
   breadcrumb: (t) => t("realm-settings:createAttribute"),
   access: "manage-realm",
 };

js/apps/admin-ui/src/realm-settings/routes/AddClientPolicy.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type AddClientPolicyParams = { realm: string };
 
+const NewClientPolicyForm = lazy(() => import("../NewClientPolicyForm"));
+
 export const AddClientPolicyRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/policies/add-client-policy",
-  component: lazy(() => import("../NewClientPolicyForm")),
+  element: <NewClientPolicyForm />,
   breadcrumb: (t) => t("realm-settings:createPolicy"),
   access: "manage-clients",
 };

js/apps/admin-ui/src/realm-settings/routes/AddClientProfile.tsx

@@ -8,9 +8,11 @@ export type AddClientProfileParams = {
   tab: string;
 };
 
+const ClientProfileForm = lazy(() => import("../ClientProfileForm"));
+
 export const AddClientProfileRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:tab/add-profile",
-  component: lazy(() => import("../ClientProfileForm")),
+  element: <ClientProfileForm />,
   breadcrumb: (t) => t("realm-settings:newClientProfile"),
   access: "manage-realm",
 };

js/apps/admin-ui/src/realm-settings/routes/AddCondition.tsx

@@ -8,9 +8,13 @@ export type NewClientPolicyConditionParams = {
   policyName: string;
 };
 
+const NewClientPolicyCondition = lazy(
+  () => import("../NewClientPolicyCondition")
+);
+
 export const NewClientPolicyConditionRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:policyName/edit-policy/create-condition",
-  component: lazy(() => import("../NewClientPolicyCondition")),
+  element: <NewClientPolicyCondition />,
   breadcrumb: (t) => t("realm-settings:addCondition"),
   access: "manage-clients",
 };

js/apps/admin-ui/src/realm-settings/routes/AddExecutor.tsx

@@ -8,9 +8,11 @@ export type AddExecutorParams = {
   profileName: string;
 };
 
+const ExecutorForm = lazy(() => import("../ExecutorForm"));
+
 export const AddExecutorRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:profileName/add-executor",
-  component: lazy(() => import("../ExecutorForm")),
+  element: <ExecutorForm />,
   breadcrumb: (t) => t("realm-settings:addExecutor"),
   access: "manage-realm",
 };

js/apps/admin-ui/src/realm-settings/routes/Attribute.tsx

@@ -8,9 +8,11 @@ export type AttributeParams = {
   attributeName: string;
 };
 
+const NewAttributeSettings = lazy(() => import("../NewAttributeSettings"));
+
 export const AttributeRoute: RouteDef = {
   path: "/:realm/realm-settings/user-profile/attributes/:attributeName/edit-attribute",
-  component: lazy(() => import("../NewAttributeSettings")),
+  element: <NewAttributeSettings />,
   breadcrumb: (t) => t("realm-settings:editAttribute"),
   access: "manage-realm",
 };

js/apps/admin-ui/src/realm-settings/routes/ClientPolicies.tsx

@@ -10,9 +10,11 @@ export type ClientPoliciesParams = {
   tab: ClientPoliciesTab;
 };
 
+const RealmSettingsSection = lazy(() => import("../RealmSettingsSection"));
+
 export const ClientPoliciesRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:tab",
-  component: lazy(() => import("../RealmSettingsSection")),
+  element: <RealmSettingsSection />,
   breadcrumb: (t) => t("realm-settings:clientPolicies"),
   access: "view-realm",
 };

js/apps/admin-ui/src/realm-settings/routes/ClientProfile.tsx

@@ -8,9 +8,11 @@ export type ClientProfileParams = {
   profileName: string;
 };
 
+const ClientProfileForm = lazy(() => import("../ClientProfileForm"));
+
 export const ClientProfileRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:profileName/edit-profile",
-  component: lazy(() => import("../ClientProfileForm")),
+  element: <ClientProfileForm />,
   breadcrumb: (t) => t("realm-settings:clientProfile"),
   access: ["view-realm", "view-users"],
 };

js/apps/admin-ui/src/realm-settings/routes/EditAttributesGroup.tsx

@@ -8,9 +8,13 @@ export type EditAttributesGroupParams = {
   name: string;
 };
 
+const AttributesGroupDetails = lazy(
+  () => import("../user-profile/AttributesGroupDetails")
+);
+
 export const EditAttributesGroupRoute: RouteDef = {
   path: "/:realm/realm-settings/user-profile/attributesGroup/edit/:name",
-  component: lazy(() => import("../user-profile/AttributesGroupDetails")),
+  element: <AttributesGroupDetails />,
   breadcrumb: (t) => t("realm-settings:editGroupText"),
   access: "view-realm",
 };

js/apps/admin-ui/src/realm-settings/routes/EditClientPolicy.tsx

@@ -8,9 +8,11 @@ export type EditClientPolicyParams = {
   policyName: string;
 };
 
+const NewClientPolicyForm = lazy(() => import("../NewClientPolicyForm"));
+
 export const EditClientPolicyRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:policyName/edit-policy",
-  component: lazy(() => import("../NewClientPolicyForm")),
+  element: <NewClientPolicyForm />,
   access: "manage-realm",
   breadcrumb: (t) => t("realm-settings:policyDetails"),
 };

js/apps/admin-ui/src/realm-settings/routes/EditCondition.tsx

@@ -9,9 +9,13 @@ export type EditClientPolicyConditionParams = {
   conditionName: string;
 };
 
+const NewClientPolicyCondition = lazy(
+  () => import("../NewClientPolicyCondition")
+);
+
 export const EditClientPolicyConditionRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:policyName/edit-policy/:conditionName/edit-condition",
-  component: lazy(() => import("../NewClientPolicyCondition")),
+  element: <NewClientPolicyCondition />,
   breadcrumb: (t) => t("realm-settings:editCondition"),
   access: "manage-clients",
 };

js/apps/admin-ui/src/realm-settings/routes/Executor.tsx

@@ -9,9 +9,11 @@ export type ExecutorParams = {
   executorName: string;
 };
 
+const ExecutorForm = lazy(() => import("../ExecutorForm"));
+
 export const ExecutorRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:profileName/edit-profile/:executorName",
-  component: lazy(() => import("../ExecutorForm")),
+  element: <ExecutorForm />,
   breadcrumb: (t) => t("realm-settings:executorDetails"),
   access: ["manage-realm"],
 };

js/apps/admin-ui/src/realm-settings/routes/KeyProvider.tsx

@@ -19,9 +19,13 @@ export type KeyProviderParams = {
   realm: string;
 };
 
+const KeyProviderForm = lazy(
+  () => import("../keys/key-providers/KeyProviderForm")
+);
+
 export const KeyProviderFormRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/providers/:id/:providerType/settings",
-  component: lazy(() => import("../keys/key-providers/KeyProviderForm")),
+  element: <KeyProviderForm />,
   breadcrumb: (t) => t("realm-settings:editProvider"),
   access: "view-realm",
 };

js/apps/admin-ui/src/realm-settings/routes/KeysTab.tsx

@@ -10,9 +10,11 @@ export type KeysParams = {
   tab: KeySubTab;
 };
 
+const RealmSettingsSection = lazy(() => import("../RealmSettingsSection"));
+
 export const KeysRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:tab",
-  component: lazy(() => import("../RealmSettingsSection")),
+  element: <RealmSettingsSection />,
   breadcrumb: (t) => t("realm-settings:keys"),
   access: "view-realm",
 };

js/apps/admin-ui/src/realm-settings/routes/NewAttributesGroup.tsx

@@ -7,9 +7,13 @@ export type NewAttributesGroupParams = {
   realm: string;
 };
 
+const AttributesGroupDetails = lazy(
+  () => import("../user-profile/AttributesGroupDetails")
+);
+
 export const NewAttributesGroupRoute: RouteDef = {
   path: "/:realm/realm-settings/user-profile/attributesGroup/new",
-  component: lazy(() => import("../user-profile/AttributesGroupDetails")),
+  element: <AttributesGroupDetails />,
   breadcrumb: (t) => t("realm-settings:createGroupText"),
   access: "view-realm",
 };

js/apps/admin-ui/src/realm-settings/routes/RealmSettings.tsx

@@ -23,9 +23,11 @@ export type RealmSettingsParams = {
   tab?: RealmSettingsTab;
 };
 
+const RealmSettingsSection = lazy(() => import("../RealmSettingsSection"));
+
 export const RealmSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings",
-  component: lazy(() => import("../RealmSettingsSection")),
+  element: <RealmSettingsSection />,
   breadcrumb: (t) => t("realmSettings"),
   access: "view-realm",
 };

js/apps/admin-ui/src/realm-settings/routes/UserProfile.tsx

@@ -10,9 +10,11 @@ export type UserProfileParams = {
   tab: UserProfileTab;
 };
 
+const RealmSettingsSection = lazy(() => import("../RealmSettingsSection"));
+
 export const UserProfileRoute: RouteDef = {
   path: "/:realm/realm-settings/user-profile/:tab",
-  component: lazy(() => import("../RealmSettingsSection")),
+  element: <RealmSettingsSection />,
   breadcrumb: (t) => t("realm-settings:userProfile"),
   access: "view-realm",
 };

js/apps/admin-ui/src/realm/routes/AddRealm.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type AddRealmParams = { realm: string };
 
+const NewRealmForm = lazy(() => import("../add/NewRealmForm"));
+
 export const AddRealmRoute: RouteDef = {
   path: "/:realm/add-realm",
-  component: lazy(() => import("../add/NewRealmForm")),
+  element: <NewRealmForm />,
   breadcrumb: (t) => t("realm:createRealm"),
   access: "view-realm",
 };

js/apps/admin-ui/src/route-config.tsx

@@ -1,6 +1,7 @@
 import type { AccessType } from "@keycloak/keycloak-admin-client/lib/defs/whoAmIRepresentation";
 import type { TFunction } from "i18next";
-import type { ComponentType, LazyExoticComponent } from "react";
+import type { ComponentType } from "react";
+import { RouteObject } from "react-router-dom";
 
 import authenticationRoutes from "./authentication/routes";
 import clientScopesRoutes from "./client-scopes/routes";
@@ -17,16 +18,15 @@ import sessionRoutes from "./sessions/routes";
 import userFederationRoutes from "./user-federation/routes";
 import userRoutes from "./user/routes";
 
-export type RouteDef = {
+export type RouteDef = Required<Pick<RouteObject, "element">> & {
   path: string;
-  component: ComponentType | LazyExoticComponent<() => JSX.Element>;
   breadcrumb?: (t: TFunction) => string | ComponentType<any>;
   access: AccessType | AccessType[];
 };
 
 const NotFoundRoute: RouteDef = {
   path: "*",
-  component: PageNotFoundSection,
+  element: <PageNotFoundSection />,
   access: "anyone",
 };
 

js/apps/admin-ui/src/sessions/routes/Sessions.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type SessionsParams = { realm: string };
 
+const SessionsSection = lazy(() => import("../SessionsSection"));
+
 export const SessionsRoute: RouteDef = {
   path: "/:realm/sessions",
-  component: lazy(() => import("../SessionsSection")),
+  element: <SessionsSection />,
   breadcrumb: (t) => t("sessions:title"),
   access: ["view-realm", "view-clients", "view-users"],
 };

js/apps/admin-ui/src/user-federation/routes/CustomUserFederation.tsx

@@ -10,9 +10,13 @@ export type CustomUserFederationRouteParams = {
   id: string;
 };
 
+const CustomProviderSettings = lazy(
+  () => import("../custom/CustomProviderSettings")
+);
+
 export const CustomUserFederationRoute: RouteDef = {
   path: "/:realm/user-federation/:providerId/:id",
-  component: lazy(() => import("../custom/CustomProviderSettings")),
+  element: <CustomProviderSettings />,
   breadcrumb: (t) => t("user-federation:providerDetails"),
   access: "view-realm",
 };

js/apps/admin-ui/src/user-federation/routes/NewCustomUserFederation.tsx

@@ -9,9 +9,13 @@ export type NewCustomUserFederationRouteParams = {
   providerId: string;
 };
 
+const CustomProviderSettings = lazy(
+  () => import("../custom/CustomProviderSettings")
+);
+
 export const NewCustomUserFederationRoute: RouteDef = {
   path: "/:realm/user-federation/:providerId/new",
-  component: lazy(() => import("../custom/CustomProviderSettings")),
+  element: <CustomProviderSettings />,
   breadcrumb: (t) => t("user-federation:addCustomProvider"),
   access: "view-realm",
 };

js/apps/admin-ui/src/user-federation/routes/NewKerberosUserFederation.tsx

@@ -5,9 +5,13 @@ import type { RouteDef } from "../../route-config";
 
 export type NewKerberosUserFederationParams = { realm: string };
 
+const UserFederationKerberosSettings = lazy(
+  () => import("../UserFederationKerberosSettings")
+);
+
 export const NewKerberosUserFederationRoute: RouteDef = {
   path: "/:realm/user-federation/kerberos/new",
-  component: lazy(() => import("../UserFederationKerberosSettings")),
+  element: <UserFederationKerberosSettings />,
   breadcrumb: (t) => t("common:settings"),
   access: "view-realm",
 };

js/apps/admin-ui/src/user-federation/routes/NewLdapUserFederation.tsx

@@ -5,9 +5,13 @@ import type { RouteDef } from "../../route-config";
 
 export type NewLdapUserFederationParams = { realm: string };
 
+const CreateUserFederationLdapSettings = lazy(
+  () => import("../CreateUserFederationLdapSettings")
+);
+
 export const NewLdapUserFederationRoute: RouteDef = {
   path: "/:realm/user-federation/ldap/new",
-  component: lazy(() => import("../CreateUserFederationLdapSettings")),
+  element: <CreateUserFederationLdapSettings />,
   breadcrumb: (t) =>
     t("user-federation:addProvider", { provider: "LDAP", count: 1 }),
   access: "view-realm",

js/apps/admin-ui/src/user-federation/routes/UserFederation.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type UserFederationParams = { realm: string };
 
+const UserFederationSection = lazy(() => import("../UserFederationSection"));
+
 export const UserFederationRoute: RouteDef = {
   path: "/:realm/user-federation",
-  component: lazy(() => import("../UserFederationSection")),
+  element: <UserFederationSection />,
   breadcrumb: (t) => t("userFederation"),
   access: "view-realm",
 };

js/apps/admin-ui/src/user-federation/routes/UserFederationKerberos.tsx

@@ -8,9 +8,13 @@ export type UserFederationKerberosParams = {
   id: string;
 };
 
+const UserFederationKerberosSettings = lazy(
+  () => import("../UserFederationKerberosSettings")
+);
+
 export const UserFederationKerberosRoute: RouteDef = {
   path: "/:realm/user-federation/kerberos/:id",
-  component: lazy(() => import("../UserFederationKerberosSettings")),
+  element: <UserFederationKerberosSettings />,
   breadcrumb: (t) => t("common:settings"),
   access: "view-realm",
 };

js/apps/admin-ui/src/user-federation/routes/UserFederationLdap.tsx

@@ -11,9 +11,13 @@ export type UserFederationLdapParams = {
   tab?: UserFederationLdapTab;
 };
 
+const UserFederationLdapSettings = lazy(
+  () => import("../UserFederationLdapSettings")
+);
+
 export const UserFederationLdapRoute: RouteDef = {
   path: "/:realm/user-federation/ldap/:id",
-  component: lazy(() => import("../UserFederationLdapSettings")),
+  element: <UserFederationLdapSettings />,
   breadcrumb: (t) => t("common:settings"),
   access: "view-realm",
 };

js/apps/admin-ui/src/user-federation/routes/UserFederationLdapMapper.tsx

@@ -9,9 +9,13 @@ export type UserFederationLdapMapperParams = {
   mapperId: string;
 };
 
+const LdapMapperDetails = lazy(
+  () => import("../ldap/mappers/LdapMapperDetails")
+);
+
 export const UserFederationLdapMapperRoute: RouteDef = {
   path: "/:realm/user-federation/ldap/:id/mappers/:mapperId",
-  component: lazy(() => import("../ldap/mappers/LdapMapperDetails")),
+  element: <LdapMapperDetails />,
   breadcrumb: (t) => t("common:mappingDetails"),
   access: "view-realm",
 };

js/apps/admin-ui/src/user-federation/routes/UserFederationsKerberos.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type UserFederationsKerberosParams = { realm: string };
 
+const UserFederationSection = lazy(() => import("../UserFederationSection"));
+
 export const UserFederationsKerberosRoute: RouteDef = {
   path: "/:realm/user-federation/kerberos",
-  component: lazy(() => import("../UserFederationSection")),
+  element: <UserFederationSection />,
   access: "view-realm",
 };
 

js/apps/admin-ui/src/user-federation/routes/UserFederationsLdap.tsx

@@ -5,9 +5,11 @@ import type { RouteDef } from "../../route-config";
 
 export type UserFederationsLdapParams = { realm: string };
 
+const UserFederationSection = lazy(() => import("../UserFederationSection"));
+
 export const UserFederationsLdapRoute: RouteDef = {
   path: "/:realm/user-federation/ldap",
-  component: lazy(() => import("../UserFederationSection")),
+  element: <UserFederationSection />,
   access: "view-realm",
 };
 

js/apps/admin-ui/src/user/routes/AddUser.tsx

@@ -6,9 +6,11 @@ import type { RouteDef } from "../../route-config";
 
 export type AddUserParams = { realm: string };
 
+const CreateUser = lazy(() => import("../CreateUser"));
+
 export const AddUserRoute: RouteDef = {
   path: "/:realm/users/add-user",
-  component: lazy(() => import("../CreateUser")),
+  element: <CreateUser />,
   breadcrumb: (t) => t("users:createUser"),
   access: ["query-users", "query-groups"],
 };

js/apps/admin-ui/src/user/routes/User.tsx

@@ -19,9 +19,11 @@ export type UserParams = {
   tab: UserTab;
 };
 
+const EditUser = lazy(() => import("../EditUser"));
+
 export const UserRoute: RouteDef = {
   path: "/:realm/users/:id/:tab",
-  component: lazy(() => import("../EditUser")),
+  element: <EditUser />,
   breadcrumb: (t) => t("users:userDetails"),
   access: "query-users",
 };

js/apps/admin-ui/src/user/routes/Users.tsx

@@ -7,9 +7,11 @@ export type UserTab = "list" | "permissions";
 
 export type UsersParams = { realm: string; tab?: UserTab };
 
+const UsersSection = lazy(() => import("../UsersSection"));
+
 export const UsersRoute: RouteDef = {
   path: "/:realm/users",
-  component: lazy(() => import("../UsersSection")),
+  element: <UsersSection />,
   breadcrumb: (t) => t("users:title"),
   access: "query-users",
 };