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

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): Prevent nested UI Routes from re-using parent component

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)
+    if (!pathSegments.length) {
-    let currentArray = currentLevel
+      return
+    }
 
-    for (let i = 0; i < pathSegments.length; i++) {
+    const [currentSegment, ...remainingSegments] = pathSegments
-      const segment = pathSegments[i]
+    let route = currentLevel.find((r) => r.path === currentSegment)
-      let route = currentArray.find((r) => r.path === segment)
 
-      if (!route) {
+    if (!route) {
-        route = {
+      route = { path: currentSegment, children: [] }
-          path: segment,
+      currentLevel.push(route)
-          lazy: async () => ({ Component }),
+    }
-        }
-        currentArray.push(route)
-      }
 
-      if (i < pathSegments.length - 1) {
+    if (remainingSegments.length === 0) {
-        // This is not the last segment, so we need to move to the next level
+      route.children ||= []
-        if (!route.children) {
+      route.children.push({
-          route.children = []
+        path: "",
-        }
+        ErrorBoundary: ErrorBoundary,
-        currentArray = route.children
+        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