Merge pull request #24186 from backstage/camila/fix-new-router-resolver

Fix app base url on the router resolver

.changeset/orange-cherries-sort.md

@@ -0,0 +1,5 @@
+---
+'@backstage/frontend-app-api': patch
+---
+
+Fix duplicated subpath on routes resolved by the `useRouteRef` hook.

packages/frontend-app-api/src/routing/RouteResolver.test.ts

@@ -92,63 +92,6 @@ describe('RouteResolver', () => {
     expect(r.resolve(externalRef4, src('/'))?.({ x: '6x' })).toBe(undefined);
   });
 
-  it('should resolve an absolute route and sub route with an app base path', () => {
-    const r = new RouteResolver(
-      new Map<RouteRef, string>([
-        [ref2, 'my-parent/:x'],
-        [ref1, 'my-route'],
-      ]),
-      new Map<RouteRef, RouteRef>([[ref1, ref2]]),
-      [
-        {
-          routeRefs: new Set([ref2]),
-          path: 'my-parent/:x',
-          ...rest,
-          children: [
-            MATCH_ALL_ROUTE,
-            { routeRefs: new Set([ref1]), path: 'my-route', ...rest },
-          ],
-        },
-      ],
-      new Map(),
-      '/base',
-    );
-
-    expect(r.resolve(ref1, src('/my-parent/1x'))?.()).toBe(
-      '/base/my-parent/1x/my-route',
-    );
-    expect(r.resolve(ref1, src('/base/my-parent/1x'))?.()).toBe(
-      '/base/my-parent/1x/my-route',
-    );
-    expect(r.resolve(ref2, src('/'))?.({ x: '1x' })).toBe('/base/my-parent/1x');
-    expect(r.resolve(ref2, src('/base'))?.({ x: '1x' })).toBe(
-      '/base/my-parent/1x',
-    );
-    expect(r.resolve(ref3, src('/'))?.({ y: '1y' })).toBe(undefined);
-    expect(r.resolve(subRef1, src('/my-parent/2x'))?.()).toBe(
-      '/base/my-parent/2x/my-route/foo',
-    );
-    expect(r.resolve(subRef1, src('/base/my-parent/2x'))?.()).toBe(
-      '/base/my-parent/2x/my-route/foo',
-    );
-    expect(r.resolve(subRef2, src('/my-parent/3x'))?.({ a: '2a' })).toBe(
-      '/base/my-parent/3x/my-route/foo/2a',
-    );
-    expect(r.resolve(subRef2, src('/base/my-parent/3x'))?.({ a: '2a' })).toBe(
-      '/base/my-parent/3x/my-route/foo/2a',
-    );
-    expect(r.resolve(subRef3, src('/'))?.({ x: '5x' })).toBe(
-      '/base/my-parent/5x/bar',
-    );
-    expect(r.resolve(subRef4, src('/'))?.({ x: '6x', a: '4a' })).toBe(
-      '/base/my-parent/6x/bar/4a',
-    );
-    expect(r.resolve(externalRef1, src('/'))?.()).toBe(undefined);
-    expect(r.resolve(externalRef2, src('/'))?.()).toBe(undefined);
-    expect(r.resolve(externalRef3, src('/'))?.({ x: '5x' })).toBe(undefined);
-    expect(r.resolve(externalRef4, src('/'))?.({ x: '6x' })).toBe(undefined);
-  });
-
   it('should resolve an absolute route with a param and with a parent', () => {
     const r = new RouteResolver(
       new Map<RouteRef, string>([
@@ -377,7 +320,7 @@ describe('RouteResolver', () => {
     );
 
     expect(r.resolve(ref2, src('/'))?.({ x: 'a/#&?b' })).toBe(
-      '/base/my-parent/a%2F%23%26%3Fb',
+      '/my-parent/a%2F%23%26%3Fb',
     );
   });
 });

packages/frontend-app-api/src/routing/RouteResolver.ts

@@ -215,15 +215,13 @@ export class RouteResolver implements RouteResolutionApi {
     // Next we figure out the base path, which is the combination of the common parent path
     // between our current location and our target location, as well as the additional path
     // that is the difference between the parent path and the base of our target location.
-    const basePath =
-      this.appBasePath +
-      resolveBasePath(
-        targetRef,
-        relativeSourceLocation,
-        this.routePaths,
-        this.routeParents,
-        this.routeObjects,
-      );
+    const basePath = resolveBasePath(
+      targetRef,
+      relativeSourceLocation,
+      this.routePaths,
+      this.routeParents,
+      this.routeObjects,
+    );
 
     const routeFunc: RouteFunc<TParams> = (...[params]) => {
       // We selectively encode some some known-dangerous characters in the