From 81c8db208884271920b16682535fea161d77a7e1 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 19 Oct 2023 16:34:02 +0200
Subject: [PATCH] core-components: make RoutedTabs not explode when rendering
 without tabs

Co-authored-by: Camila Belo <camilaibs@gmail.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/dirty-ducks-behave.md                          | 5 +++++
 .../src/components/TabbedLayout/RoutedTabs.tsx            | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/dirty-ducks-behave.md

diff --git a/.changeset/dirty-ducks-behave.md b/.changeset/dirty-ducks-behave.md
new file mode 100644
index 0000000000..c7bea8ea0a
--- /dev/null
+++ b/.changeset/dirty-ducks-behave.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fix `RoutedTabs` so that it does not explode without tabs.
diff --git a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx
index 2a0b0eae28..2c727efe1b 100644
--- a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx
+++ b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx
@@ -27,8 +27,8 @@ import { SubRoute } from './types';
 
 export function useSelectedSubRoute(subRoutes: SubRoute[]): {
   index: number;
-  route: SubRoute;
-  element: JSX.Element;
+  route?: SubRoute;
+  element?: JSX.Element;
 } {
   const params = useParams();
 
@@ -44,7 +44,7 @@ export function useSelectedSubRoute(subRoutes: SubRoute[]): {
     b.path.replace(/\/\*$/, '').localeCompare(a.path.replace(/\/\*$/, '')),
   );
 
-  const element = useRoutes(sortedRoutes) ?? subRoutes[0].children;
+  const element = useRoutes(sortedRoutes) ?? subRoutes[0]?.children;
 
   // 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
@@ -98,7 +98,7 @@ export function RoutedTabs(props: { routes: SubRoute[] }) {
         onChange={onTabChange}
       />
       <Content>
-        <Helmet title={route.title} />
+        <Helmet title={route?.title} />
         {element}
       </Content>
     </>