fix for custom ids

Author: AlemTuzlak

src/client/components/RouteInfo.tsx

@@ -30,13 +30,14 @@ export const RouteInfo = ({ route: routeToUse, className, openNewRoute, onClose
 				<>
 					<Icon onClick={onClose} className="absolute right-2 top-2 cursor-pointer text-red-600" name="X" />
 
-					<h1 className="text-xl font-semibold">{routeToUse.url}</h1>
+					<h1 className="text-xl text-white font-semibold">{routeToUse.url}</h1>
 					<hr className="mb-4 mt-1" />
 					<h3>
-						<span className="text-gray-500">Path:</span> {path}
+						<span className="text-gray-500">Path:</span>
+						<span className="text-white"> {path}</span>
 					</h3>
 					<h3>
-						<span className="text-gray-500">Url:</span> {pathToOpen}
+						<span className="text-gray-500">Url:</span> <span className="text-white">{pathToOpen}</span>
 					</h3>
 				</>
 			)}

src/vite/plugin.tsx

@@ -110,10 +110,16 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 							return [
 								routeOrRoutes,
 								...recursiveFlatten(
-									routeOrRoutes.children.map((child) => ({
-										...child,
-										parentId: routeOrRoutes.file.split(".").slice(0, -1).join("."),
-									}))
+									routeOrRoutes.children.map((child) => {
+										const withoutExtension = child.file.split(".").slice(0, -1).join(".")
+										// remove the trailing ./ and ../
+										const withoutRelative = withoutExtension.replace(/^\.\//, "").replace(/^\.\.\//, "")
+										return {
+											...child,
+											id: child.id ?? withoutRelative,
+											parentId: withoutExtension,
+										}
+									})
 								),
 							]
 						}