core-components: RoutedTabs react-router stable compatibility

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.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.

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: <div>tabbed-test-content-3</div>,
 };
 

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;