diff --git a/.changeset/old-lemons-switch.md b/.changeset/old-lemons-switch.md
new file mode 100644
index 0000000000..30c1b8040c
--- /dev/null
+++ b/.changeset/old-lemons-switch.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+The `RoutedTabs` component has been updated to be compatible with `react-router` v6 stable.
diff --git a/packages/core-components/src/components/TabbedLayout/RoutedTabs.test.tsx b/packages/core-components/src/components/TabbedLayout/RoutedTabs.test.tsx
index f76524fe50..15b00937a0 100644
--- a/packages/core-components/src/components/TabbedLayout/RoutedTabs.test.tsx
+++ b/packages/core-components/src/components/TabbedLayout/RoutedTabs.test.tsx
@@ -32,7 +32,7 @@ const testRoute2 = {
const testRoute3 = {
title: 'tabbed-test-title-3',
- path: '/some-other-path-similar',
+ path: 'some-other-path-similar',
children:
tabbed-test-content-3
,
};
diff --git a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx
index 5debafd3f8..eb17fac045 100644
--- a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx
+++ b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx
@@ -41,7 +41,15 @@ export function useSelectedSubRoute(subRoutes: SubRoute[]): {
const element = useRoutes(sortedRoutes) ?? subRoutes[0].children;
- const [matchedRoute] = matchRoutes(sortedRoutes, `/${params['*']}`) ?? [];
+ // TODO(Rugvip): Once we only support v6 stable we can always prefix
+ // This avoids having a double / prefix for react-router v6 beta, which in turn breaks
+ // the tab highlighting when using relative paths for the tabs.
+ let currentRoute = params['*'] ?? '';
+ if (!currentRoute.startsWith('/')) {
+ currentRoute = `/${currentRoute}`;
+ }
+
+ const [matchedRoute] = matchRoutes(sortedRoutes, currentRoute) ?? [];
const foundIndex = matchedRoute
? subRoutes.findIndex(t => `${t.path}/*` === matchedRoute.route.path)
: 0;