From 37e8c5e1280e4f0a2efa415cd807eb2287aa2d2b Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Fri, 25 Mar 2022 16:35:09 +0100
Subject: [PATCH] core-components: RoutedTabs react-router stable compatibility

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/old-lemons-switch.md                        |  5 +++++
 .../src/components/TabbedLayout/RoutedTabs.test.tsx    |  2 +-
 .../src/components/TabbedLayout/RoutedTabs.tsx         | 10 +++++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/old-lemons-switch.md

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