From 7b6793f846a36289fe8cdfd501401b1d993d9eff Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Thu, 24 Oct 2024 13:06:49 +0200
Subject: [PATCH] fix(dashboard): Prevent reusing same Component for nested UI
 routes (#9725)

**What**
- Fixes a bug that caused nested UI routes to reuse their parents Component.
---
 .changeset/mighty-flowers-tan.md              |  5 ++
 .../dashboard/src/extensions/routes/utils.ts  | 47 ++++++++++---------
 2 files changed, 30 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/mighty-flowers-tan.md

diff --git a/.changeset/mighty-flowers-tan.md b/.changeset/mighty-flowers-tan.md
new file mode 100644
index 0000000000..5d455f63a7
--- /dev/null
+++ b/.changeset/mighty-flowers-tan.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): Prevent nested UI Routes from re-using parent component
diff --git a/packages/admin/dashboard/src/extensions/routes/utils.ts b/packages/admin/dashboard/src/extensions/routes/utils.ts
index 903c067d0d..2512167ae9 100644
--- a/packages/admin/dashboard/src/extensions/routes/utils.ts
+++ b/packages/admin/dashboard/src/extensions/routes/utils.ts
@@ -1,5 +1,6 @@
 import { ComponentType } from "react"
 import { RouteObject } from "react-router-dom"
+import { ErrorBoundary } from "../../components/utilities/error-boundary"
 import { RouteExtension, RouteModule } from "../types"
 
 /**
@@ -27,41 +28,43 @@ export const createRouteMap = (
   const root: RouteObject[] = []
 
   const addRoute = (
-    fullPath: string,
+    pathSegments: string[],
     Component: ComponentType,
     currentLevel: RouteObject[]
   ) => {
-    const pathSegments = fullPath.split("/").filter(Boolean)
-    let currentArray = currentLevel
+    if (!pathSegments.length) {
+      return
+    }
 
-    for (let i = 0; i < pathSegments.length; i++) {
-      const segment = pathSegments[i]
-      let route = currentArray.find((r) => r.path === segment)
+    const [currentSegment, ...remainingSegments] = pathSegments
+    let route = currentLevel.find((r) => r.path === currentSegment)
 
-      if (!route) {
-        route = {
-          path: segment,
-          lazy: async () => ({ Component }),
-        }
-        currentArray.push(route)
-      }
+    if (!route) {
+      route = { path: currentSegment, children: [] }
+      currentLevel.push(route)
+    }
 
-      if (i < pathSegments.length - 1) {
-        // This is not the last segment, so we need to move to the next level
-        if (!route.children) {
-          route.children = []
-        }
-        currentArray = route.children
-      }
+    if (remainingSegments.length === 0) {
+      route.children ||= []
+      route.children.push({
+        path: "",
+        ErrorBoundary: ErrorBoundary,
+        async lazy() {
+          return { Component }
+        },
+      })
+    } else {
+      route.children ||= []
+      addRoute(remainingSegments, Component, route.children)
     }
   }
 
   routes.forEach(({ path, Component }) => {
-    // Remove the ignore segment from the path if it is provided
     const cleanedPath = ignore
       ? path.replace(ignore, "").replace(/^\/+/, "")
       : path.replace(/^\/+/, "")
-    addRoute(cleanedPath, Component, root)
+    const pathSegments = cleanedPath.split("/").filter(Boolean)
+    addRoute(pathSegments, Component, root)
   })
 
   return root