Use CompatRoute for routes that can be migrated (#3113)

src/App.tsx

@@ -1,7 +1,11 @@
 import { FunctionComponent, Suspense } from "react";
 import { Page } from "@patternfly/react-core";
-import { HashRouter as Router, Route, Switch } from "react-router-dom";
+import {
-import { CompatRouter } from "react-router-dom-v5-compat";
+  HashRouter as Router,
+  Route as LegacyRoute,
+  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";
@@ -97,7 +101,10 @@ export const App = ({ keycloak, adminClient }: AdminClientProps) => {
         >
           <ServerInfoProvider>
             <Switch>
-              {routes.map((route, i) => (
+              {routes.map((route, i) => {
+                const Route = route.legacy ? LegacyRoute : CompatRoute;
+
+                return (
                   <Route
                     key={i}
                     path={route.path}
@@ -105,7 +112,8 @@ export const App = ({ keycloak, adminClient }: AdminClientProps) => {
                   >
                     <SecuredRoute route={route} />
                   </Route>
-              ))}
+                );
+              })}
             </Switch>
           </ServerInfoProvider>
         </ErrorBoundary>

src/authentication/routes/Authentication.ts

@@ -12,6 +12,7 @@ export const AuthenticationRoute: RouteDef = {
   component: lazy(() => import("../AuthenticationSection")),
   breadcrumb: (t) => t("authentication"),
   access: ["view-realm", "view-identity-providers", "view-clients"],
+  legacy: true,
 };
 
 export const toAuthentication = (

src/authentication/routes/Flow.ts

@@ -15,6 +15,7 @@ export const FlowRoute: RouteDef = {
   component: lazy(() => import("../FlowDetails")),
   breadcrumb: (t) => t("authentication:flowDetails"),
   access: "view-authorization",
+  legacy: true,
 };
 
 export const toFlow = (params: FlowParams): LocationDescriptorObject => ({

src/client-scopes/routes/ClientScope.ts

@@ -17,6 +17,7 @@ export const ClientScopeRoute: RouteDef = {
   component: lazy(() => import("../form/ClientScopeForm")),
   breadcrumb: (t) => t("client-scopes:clientScopeDetails"),
   access: "view-clients",
+  legacy: true,
 };
 
 export const toClientScope = (

src/clients/routes/Clients.ts

@@ -15,6 +15,7 @@ export const ClientsRoute: RouteDef = {
   component: lazy(() => import("../ClientsSection")),
   breadcrumb: (t) => t("clients:clientList"),
   access: "query-clients",
+  legacy: true,
 };
 
 export const toClients = (params: ClientsParams): LocationDescriptorObject => ({

src/clients/routes/DedicatedScopeDetails.ts

@@ -16,6 +16,7 @@ export const DedicatedScopeDetailsRoute: RouteDef = {
   component: lazy(() => import("../scopes/DedicatedScopes")),
   breadcrumb: (t) => t("clients:dedicatedScopes"),
   access: "view-clients",
+  legacy: true,
 };
 
 export const toDedicatedScope = (

src/clients/routes/NewPermission.ts

@@ -17,6 +17,7 @@ export const NewPermissionRoute: RouteDef = {
   component: lazy(() => import("../authorization/PermissionDetails")),
   breadcrumb: (t) => t("clients:createPermission"),
   access: "view-clients",
+  legacy: true,
 };
 
 export const toNewPermission = (

src/clients/routes/Resource.ts

@@ -14,6 +14,7 @@ export const ResourceDetailsRoute: RouteDef = {
   component: lazy(() => import("../authorization/ResourceDetails")),
   breadcrumb: (t) => t("clients:createResource"),
   access: "view-clients",
+  legacy: true,
 };
 
 export const toResourceDetails = (

src/clients/routes/Scope.ts

@@ -14,6 +14,7 @@ export const ScopeDetailsRoute: RouteDef = {
   component: lazy(() => import("../authorization/ScopeDetails")),
   breadcrumb: (t) => t("clients:createAuthorizationScope"),
   access: "manage-clients",
+  legacy: true,
 };
 
 export const toScopeDetails = (

src/dashboard/routes/Dashboard.ts

@@ -12,6 +12,7 @@ export const DashboardRoute: RouteDef = {
   component: lazy(() => import("../Dashboard")),
   breadcrumb: (t) => t("common:home"),
   access: "anyone",
+  legacy: true,
 };
 
 export const toDashboard = (

src/events/routes/Events.ts

@@ -15,6 +15,7 @@ export const EventsRoute: RouteDef = {
   component: lazy(() => import("../EventsSection")),
   breadcrumb: (t) => t("events:title"),
   access: "view-events",
+  legacy: true,
 };
 
 export const toEvents = (params: EventsParams): LocationDescriptorObject => ({

src/groups/routes/Groups.tsx

@@ -12,6 +12,7 @@ export const GroupsRoute: RouteDef = {
   matchOptions: {
     exact: false,
   },
+  legacy: true,
 };
 
 export const toGroups = (params: GroupsParams): LocationDescriptorObject => ({

src/realm-roles/routes/ClientRole.ts

@@ -21,6 +21,7 @@ export const ClientRoleRoute: RouteDef = {
   component: lazy(() => import("../RealmRoleTabs")),
   breadcrumb: (t) => t("roles:roleDetails"),
   access: "view-realm",
+  legacy: true,
 };
 
 export const toClientRole = (

src/realm-roles/routes/RealmRole.ts

@@ -20,6 +20,7 @@ export const RealmRoleRoute: RouteDef = {
   component: lazy(() => import("../RealmRoleTabs")),
   breadcrumb: (t) => t("roles:roleDetails"),
   access: ["view-realm", "view-users"],
+  legacy: true,
 };
 
 export const toRealmRole = (

src/realm-settings/routes/AddCondition.ts

@@ -13,6 +13,7 @@ export const NewClientPolicyConditionRoute: RouteDef = {
   component: lazy(() => import("../NewClientPolicyCondition")),
   breadcrumb: (t) => t("realm-settings:addCondition"),
   access: "manage-clients",
+  legacy: true,
 };
 
 export const toNewClientPolicyCondition = (

src/realm-settings/routes/EditCondition.ts

@@ -14,6 +14,7 @@ export const EditClientPolicyConditionRoute: RouteDef = {
   component: lazy(() => import("../NewClientPolicyCondition")),
   breadcrumb: (t) => t("realm-settings:editCondition"),
   access: "manage-clients",
+  legacy: true,
 };
 
 export const toEditClientPolicyCondition = (

src/realm-settings/routes/RealmSettings.ts

@@ -28,6 +28,7 @@ export const RealmSettingsRoute: RouteDef = {
   component: lazy(() => import("../RealmSettingsSection")),
   breadcrumb: (t) => t("realmSettings"),
   access: "view-realm",
+  legacy: true,
 };
 
 export const toRealmSettings = (

src/route-config.ts

@@ -23,6 +23,7 @@ export type RouteDef = {
   breadcrumb?: (t: TFunction) => string | ComponentType<any>;
   access: AccessType | AccessType[];
   matchOptions?: MatchOptions;
+  legacy?: boolean;
 };
 
 const NotFoundRoute: RouteDef = {

src/user-federation/routes/UserFederationLdap.ts

@@ -16,6 +16,7 @@ export const UserFederationLdapRoute: RouteDef = {
   component: lazy(() => import("../UserFederationLdapSettings")),
   breadcrumb: (t) => t("common:settings"),
   access: "view-realm",
+  legacy: true,
 };
 
 export const toUserFederationLdap = (

src/user/routes/Users.ts

@@ -12,6 +12,7 @@ export const UsersRoute: RouteDef = {
   component: lazy(() => import("../UsersSection")),
   breadcrumb: (t) => t("users:title"),
   access: "query-users",
+  legacy: true,
 };
 
 export const toUsers = (params: UsersParams): LocationDescriptorObject => ({