core-app-api: fix root route handling in FlatRoutes

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

.changeset/forty-singers-look.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-app-api': patch
+---
+
+Fix a bug in `FlatRoutes` that prevented outlets from working with the root route, as well as matching root routes too broadly.

packages/core-app-api/src/routing/FlatRoutes.test.tsx

@@ -100,7 +100,6 @@ describe('FlatRoutes', () => {
       return <>Outlet: {useOutlet()}</>;
     };
 
-    // The '/*' suffixes here are intentional and will be ignored by FlatRoutes
     const routes = (
       <>
         <Route path="/a" element={<MyPage />}>
@@ -112,11 +111,15 @@ describe('FlatRoutes', () => {
         <Route path="/b" element={<MyPage />}>
           b
         </Route>
+        <Route path="/" element={<MyPage />}>
+          c
+        </Route>
       </>
     );
     const renderRoute = makeRouteRenderer(<FlatRoutes>{routes}</FlatRoutes>);
     expect(renderRoute('/a').getByText('Outlet: a')).toBeInTheDocument();
     expect(renderRoute('/a/b').getByText('Outlet: a-b')).toBeInTheDocument();
     expect(renderRoute('/b').getByText('Outlet: b')).toBeInTheDocument();
+    expect(renderRoute('/').getByText('Outlet: c')).toBeInTheDocument();
   });
 });

packages/core-app-api/src/routing/FlatRoutes.tsx

@@ -49,8 +49,10 @@ export const FlatRoutes = (props: FlatRoutesProps): JSX.Element | null => {
             element: child,
             children: child.props.children
               ? [
+                  // These are the children of each route, which we all add in under a catch-all
+                  // subroute in order to make them available to `useOutlet`
                   {
-                    path: '/*',
+                    path: path === '/' ? '/' : '/*', // The root path must require an exact match
                     element: child.props.children,
                   },
                 ]