Merge pull request #30471 from backstage/fix-routing

Fix duplicate slash in `renderInTestApp` routing

.changeset/yellow-spies-rescue.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-app': patch
+---
+
+Remove trailing slashes in the `AppRoutes` extension to ensure any nested routing behaves correctly.

packages/frontend-test-utils/src/app/renderInTestApp.test.tsx

@@ -21,6 +21,7 @@ import {
   TestApiProvider,
 } from '@backstage/frontend-test-utils';
 import { analyticsApiRef, useAnalytics } from '@backstage/frontend-plugin-api';
+import { Routes, Route } from 'react-router-dom';
 import { renderInTestApp } from './renderInTestApp';
 
 describe('renderInTestApp', () => {
@@ -65,4 +66,18 @@ describe('renderInTestApp', () => {
       ]),
     );
   });
+
+  it('should support setting different locations in the history stack', async () => {
+    renderInTestApp(
+      <Routes>
+        <Route path="/" element={<h1>Index Page</h1>} />
+        <Route path="/second-page" element={<h1>Second Page</h1>} />
+      </Routes>,
+      {
+        initialRouteEntries: ['/second-page'],
+      },
+    );
+
+    expect(screen.getByText('Second Page')).toBeInTheDocument();
+  });
 });

plugins/app/src/extensions/AppRoutes.tsx

@@ -42,7 +42,9 @@ export const AppRoutes = createExtension({
 
       const element = useRoutes([
         ...inputs.routes.map(route => ({
-          path: `${route.get(coreExtensionData.routePath)}/*`,
+          path: `${route
+            .get(coreExtensionData.routePath)
+            .replace(/\/$/, '')}/*`,
           element: route.get(coreExtensionData.reactElement),
         })),
         {