diff --git a/.changeset/yellow-spies-rescue.md b/.changeset/yellow-spies-rescue.md new file mode 100644 index 0000000000..83ae084288 --- /dev/null +++ b/.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. diff --git a/packages/frontend-test-utils/src/app/renderInTestApp.test.tsx b/packages/frontend-test-utils/src/app/renderInTestApp.test.tsx index cee6273cb1..8e1b1e1ea0 100644 --- a/packages/frontend-test-utils/src/app/renderInTestApp.test.tsx +++ b/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( + + Index Page} /> + Second Page} /> + , + { + initialRouteEntries: ['/second-page'], + }, + ); + + expect(screen.getByText('Second Page')).toBeInTheDocument(); + }); }); diff --git a/plugins/app/src/extensions/AppRoutes.tsx b/plugins/app/src/extensions/AppRoutes.tsx index 304b0b0289..1f15ced3ea 100644 --- a/plugins/app/src/extensions/AppRoutes.tsx +++ b/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), })), {