diff --git a/src/PageNav.tsx b/src/PageNav.tsx
index 21652079d1..a3c4de604f 100644
--- a/src/PageNav.tsx
+++ b/src/PageNav.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import { useHistory, useRouteMatch } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
   Nav,
@@ -13,6 +13,7 @@ import { RealmSelector } from "./components/realm-selector/RealmSelector";
 import { useRealm } from "./context/realm-context/RealmContext";
 import { useAccess } from "./context/access/Access";
 import { routes } from "./route-config";
+import { AddRealmRoute } from "./realm/routes/AddRealm";
 
 export const PageNav: React.FunctionComponent = () => {
   const { t } = useTranslation("common");
@@ -68,8 +69,7 @@ export const PageNav: React.FunctionComponent = () => {
     "view-identity-providers"
   );
 
-  const { pathname } = useLocation();
-  const isOnAddRealm = () => pathname.indexOf("add-realm") === -1;
+  const isOnAddRealm = !!useRouteMatch(AddRealmRoute.path);
 
   return (
     <PageSidebar
@@ -80,12 +80,12 @@ export const PageNav: React.FunctionComponent = () => {
               <RealmSelector />
             </NavItem>
           </NavList>
-          {isOnAddRealm() && (
+          {!isOnAddRealm && (
             <NavGroup title="">
               <LeftNav title="home" path="/" />
             </NavGroup>
           )}
-          {showManage && isOnAddRealm() && (
+          {showManage && !isOnAddRealm && (
             <NavGroup title={t("manage")}>
               <LeftNav title="clients" path="/clients" />
               <LeftNav title="clientScopes" path="/client-scopes" />
@@ -97,7 +97,7 @@ export const PageNav: React.FunctionComponent = () => {
             </NavGroup>
           )}
 
-          {showConfigure && isOnAddRealm() && (
+          {showConfigure && !isOnAddRealm && (
             <NavGroup title={t("configure")}>
               <LeftNav title="realmSettings" path="/realm-settings" />
               <LeftNav title="authentication" path="/authentication" />
diff --git a/src/components/realm-selector/RealmSelector.tsx b/src/components/realm-selector/RealmSelector.tsx
index ae5d73d56d..9ff5b7f43b 100644
--- a/src/components/realm-selector/RealmSelector.tsx
+++ b/src/components/realm-selector/RealmSelector.tsx
@@ -17,6 +17,7 @@ import { useHistory } from "react-router-dom";
 
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useWhoAmI } from "../../context/whoami/WhoAmI";
+import { toAddRealm } from "../../realm/routes/AddRealm";
 import { toUpperCase } from "../../util";
 import { RecentUsed } from "./recent-used";
 
@@ -66,7 +67,7 @@ export const RealmSelector = () => {
       component="div"
       isBlock
       onClick={() => {
-        history.push(`/${realm}/add-realm`);
+        history.push(toAddRealm({ realm }));
         setOpen(!open);
       }}
     >
diff --git a/src/realm/routes.ts b/src/realm/routes.ts
new file mode 100644
index 0000000000..c62b120b40
--- /dev/null
+++ b/src/realm/routes.ts
@@ -0,0 +1,6 @@
+import type { RouteDef } from "../route-config";
+import { AddRealmRoute } from "./routes/AddRealm";
+
+const routes: RouteDef[] = [AddRealmRoute];
+
+export default routes;
diff --git a/src/realm/routes/AddRealm.ts b/src/realm/routes/AddRealm.ts
new file mode 100644
index 0000000000..2f5d4125af
--- /dev/null
+++ b/src/realm/routes/AddRealm.ts
@@ -0,0 +1,19 @@
+import type { LocationDescriptorObject } from "history";
+import { generatePath } from "react-router-dom";
+import type { RouteDef } from "../../route-config";
+import { NewRealmForm } from "../add/NewRealmForm";
+
+export type AddRealmParams = { realm: string };
+
+export const AddRealmRoute: RouteDef = {
+  path: "/:realm/add-realm",
+  component: NewRealmForm,
+  breadcrumb: (t) => t("realm:createRealm"),
+  access: "manage-realm",
+};
+
+export const toAddRealm = (
+  params: AddRealmParams
+): LocationDescriptorObject => ({
+  pathname: generatePath(AddRealmRoute.path, params),
+});
diff --git a/src/route-config.ts b/src/route-config.ts
index 67447b69f2..a63054b8d5 100644
--- a/src/route-config.ts
+++ b/src/route-config.ts
@@ -32,7 +32,7 @@ import {
   EditProviderCrumb,
   RealmSettingsSection,
 } from "./realm-settings/RealmSettingsSection";
-import { NewRealmForm } from "./realm/add/NewRealmForm";
+import realmRoutes from "./realm/routes";
 import { SessionsSection } from "./sessions/SessionsSection";
 import { LdapMapperDetails } from "./user-federation/ldap/mappers/LdapMapperDetails";
 import { UserFederationKerberosSettings } from "./user-federation/UserFederationKerberosSettings";
@@ -52,12 +52,7 @@ export type RouteDef = {
 
 export const routes: RouteDef[] = [
   ...clientRoutes,
-  {
-    path: "/:realm/add-realm",
-    component: NewRealmForm,
-    breadcrumb: (t) => t("realm:createRealm"),
-    access: "manage-realm",
-  },
+  ...realmRoutes,
   {
     path: "/:realm/clients/:clientId/roles/add-role",
     component: RealmRoleTabs,