fixed routing

src/PageNav.tsx

@@ -41,7 +41,8 @@ export const PageNav: React.FunctionComponent = () => {
   type LeftNavProps = { title: string; path: string };
   const LeftNav = ({ title, path }: LeftNavProps) => {
     const route = routes(() => {}).find(
-      (route) => route.path.substr("/:realm".length) === path
+      (route) =>
+        route.path.replaceAll(/\/:.+?(\?|(?:(?!\/).)*|$)/g, "") === path
     );
     if (!route || !hasAccess(route.access)) return <></>;
     //remove "/realm-name" from the start of the path

src/clients/ClientsSection.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Link, useHistory, useRouteMatch } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   AlertVariant,
@@ -22,14 +22,15 @@ import { formattedLinkTableCell } from "../components/external-link/FormattedLin
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
 import { InitialAccessTokenList } from "./initial-access/InitialAccessTokenList";
+import { useRealm } from "../context/realm-context/RealmContext";
 
 export const ClientsSection = () => {
   const { t } = useTranslation("clients");
   const { addAlert } = useAlerts();
   const history = useHistory();
-  const { url } = useRouteMatch();
 
   const adminClient = useAdminClient();
+  const { realm } = useRealm();
   const baseUrl = getBaseUrl(adminClient);
 
   const [key, setKey] = useState(0);
@@ -70,7 +71,7 @@ export const ClientsSection = () => {
 
   const ClientDetailLink = (client: ClientRepresentation) => (
     <>
-      <Link key={client.id} to={`${url}/${client.id}/settings`}>
+      <Link key={client.id} to={`/${realm}/clients/${client.id}/settings`}>
         {client.clientId}
         {!client.enabled && (
           <Badge isRead className="pf-u-ml-sm">
@@ -113,13 +114,19 @@ export const ClientsSection = () => {
               toolbarItem={
                 <>
                   <ToolbarItem>
-                    <Button onClick={() => history.push(`${url}/add-client`)}>
+                    <Button
+                      onClick={() =>
+                        history.push(`/${realm}/clients/add-client`)
+                      }
+                    >
                       {t("createClient")}
                     </Button>
                   </ToolbarItem>
                   <ToolbarItem>
                     <Button
-                      onClick={() => history.push(`${url}/import-client`)}
+                      onClick={() =>
+                        history.push(`/${realm}/clients/import-client`)
+                      }
                       variant="link"
                     >
                       {t("importClient")}

src/components/bread-crumb/PageBreadCrumbs.tsx

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { isValidElement } from "react";
 import { Link } from "react-router-dom";
-import useBreadcrumbs from "use-react-router-breadcrumbs";
+import useBreadcrumbs, { BreadcrumbData } from "use-react-router-breadcrumbs";
 import { useTranslation } from "react-i18next";
+import _ from "lodash";
 import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core";
 
 import { useRealm } from "../../context/realm-context/RealmContext";
@@ -11,9 +12,15 @@ import { GroupBreadCrumbs } from "./GroupBreadCrumbs";
 export const PageBreadCrumbs = () => {
   const { t } = useTranslation();
   const { realm } = useRealm();
-  const crumbs = useBreadcrumbs(routes(t), {
+  const elementText = (crumb: BreadcrumbData) =>
+    isValidElement(crumb.breadcrumb) && crumb.breadcrumb.props.children;
+
+  const crumbs = _.uniqBy(
+    useBreadcrumbs(routes(t), {
       excludePaths: ["/", `/${realm}`],
-  });
+    }),
+    elementText
+  );
   return (
     <>
       {crumbs.length > 1 && (

src/route-config.ts

@@ -43,24 +43,6 @@ export const routes: RoutesFn = (t: TFunction) => [
     breadcrumb: t("realm:createRealm"),
     access: "manage-realm",
   },
-  {
-    path: "/:realm/clients",
-    component: ClientsSection,
-    breadcrumb: t("clients:clientList"),
-    access: "query-clients",
-  },
-  {
-    path: "/:realm/clients/:tab?",
-    component: ClientsSection,
-    breadcrumb: null,
-    access: "query-clients",
-  },
-  {
-    path: "/:realm/clients/initialAccessToken/create",
-    component: CreateInitialAccessToken,
-    breadcrumb: t("clients:createToken"),
-    access: "manage-clients",
-  },
   {
     path: "/:realm/clients/add-client",
     component: NewClientForm,
@@ -73,6 +55,18 @@ export const routes: RoutesFn = (t: TFunction) => [
     breadcrumb: t("clients:importClient"),
     access: "manage-clients",
   },
+  {
+    path: "/:realm/clients/:tab?",
+    component: ClientsSection,
+    breadcrumb: t("clients:clientList"),
+    access: "query-clients",
+  },
+  {
+    path: "/:realm/clients/initialAccessToken/create",
+    component: CreateInitialAccessToken,
+    breadcrumb: t("clients:createToken"),
+    access: "manage-clients",
+  },
   {
     path: "/:realm/clients/:clientId/roles/add-role",
     component: RealmRoleTabs,
@@ -80,17 +74,11 @@ export const routes: RoutesFn = (t: TFunction) => [
     access: "manage-realm",
   },
   {
-    path: "/:realm/clients/:clientId/roles/:id",
+    path: "/:realm/clients/:clientId/roles/:id/:tab?",
     component: RealmRoleTabs,
     breadcrumb: t("roles:roleDetails"),
     access: "view-realm",
   },
-  {
-    path: "/:realm/clients/:clientId/roles/:id/:tab",
-    component: RealmRoleTabs,
-    breadcrumb: null,
-    access: "view-realm",
-  },
   {
     path: "/:realm/clients/:clientId/:tab",
     component: ClientDetails,
@@ -140,17 +128,11 @@ export const routes: RoutesFn = (t: TFunction) => [
     access: "manage-realm",
   },
   {
-    path: "/:realm/roles/:id",
+    path: "/:realm/roles/:id/:tab?",
     component: RealmRoleTabs,
     breadcrumb: t("roles:roleDetails"),
     access: "view-realm",
   },
-  {
-    path: "/:realm/roles/:id/:tab",
-    component: RealmRoleTabs,
-    breadcrumb: null,
-    access: "view-realm",
-  },
   {
     path: "/:realm/users",
     component: UsersSection,
@@ -170,17 +152,11 @@ export const routes: RoutesFn = (t: TFunction) => [
     access: "view-realm",
   },
   {
-    path: "/:realm/events",
+    path: "/:realm/events/:tab?",
     component: EventsSection,
     breadcrumb: t("events:title"),
     access: "view-events",
   },
-  {
-    path: "/:realm/events/:tab",
-    component: EventsSection,
-    breadcrumb: null,
-    access: "view-events",
-  },
   {
     path: "/:realm/realm-settings",
     component: RealmSettingsSection,