Root router have a path different to '' or '/'

.changeset/404-root-with-path.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/router": patch
+---
+
+Allow 404 detection to leverage root route error boundary if path contains a URL segment

contributors.yml

@@ -234,4 +234,5 @@
 - xcsnowcity
 - yionr
 - yuleicul
+- yracnet
 - zheng-chuang

packages/router/__tests__/router-test.ts

@@ -309,13 +309,13 @@ function setup({
   // active navigation loader/action
   function enhanceRoutes(_routes: TestRouteObject[]) {
     return _routes.map((r) => {
-      let enhancedRoute: AgnosticDataRouteObject = {
+      let enhancedRoute: AgnosticRouteObject = {
         ...r,
         lazy: undefined,
         loader: undefined,
         action: undefined,
         children: undefined,
-        id: r.id || `route-${guid++}`,
+        id: r.id,
       };
       if (r.lazy) {
         // @ts-expect-error
@@ -4817,6 +4817,85 @@ describe("a router", () => {
       });
     });
 
+    it("handles 404 routes when the root route contains a path (initialization)", () => {
+      let t = setup({
+        routes: [
+          {
+            id: "root",
+            path: "/path",
+            children: [
+              {
+                index: true,
+              },
+            ],
+          },
+        ],
+        initialEntries: ["/junk"],
+      });
+      expect(t.router.state).toMatchObject({
+        errors: {
+          root: new ErrorResponse(
+            404,
+            "Not Found",
+            new Error('No route matches URL "/junk"'),
+            true
+          ),
+        },
+        initialized: true,
+        location: {
+          pathname: "/junk",
+        },
+        matches: [
+          {
+            route: {
+              id: "root",
+            },
+          },
+        ],
+      });
+    });
+
+    it("handles 404 routes when the root route contains a path (navigation)", () => {
+      let t = setup({
+        routes: [
+          {
+            id: "root",
+            path: "/path",
+            children: [
+              {
+                index: true,
+              },
+            ],
+          },
+        ],
+        initialEntries: ["/path"],
+      });
+      expect(t.router.state).toMatchObject({
+        errors: null,
+      });
+      t.navigate("/junk");
+      expect(t.router.state).toMatchObject({
+        errors: {
+          root: new ErrorResponse(
+            404,
+            "Not Found",
+            new Error('No route matches URL "/junk"'),
+            true
+          ),
+        },
+        location: {
+          pathname: "/junk",
+        },
+        matches: [
+          {
+            route: {
+              id: "root",
+            },
+          },
+        ],
+      });
+    });
+
     it("converts formData to URLSearchParams for unspecified formMethod", async () => {
       let t = setup({
         routes: TASK_ROUTES,

packages/router/router.ts

@@ -4075,9 +4075,12 @@ function getShortCircuitMatches(routes: AgnosticDataRouteObject[]): {
   route: AgnosticDataRouteObject;
 } {
   // Prefer a root layout route if present, otherwise shim in a route object
-  let route = routes.find((r) => r.index || !r.path || r.path === "/") || {
-    id: `__shim-error-route__`,
-  };
+let route =
+  routes.length === 1
+    ? routes[0]
+    : routes.find((r) => r.index || !r.path || r.path === "/") || {
+        id: `__shim-error-route__`,
+      };
 
   return {
     matches: [