Merge pull request #11609 from backstage/camilal/fix-entity-docs-outlet

[TechDocs]: Use object routes on entity docs pages

plugins/techdocs/api-report.md

@@ -111,7 +111,9 @@ export type DocsTableRow = {
 };
 
 // @public
-export const EmbeddedDocsRouter: (props: PropsWithChildren<{}>) => JSX.Element;
+export const EmbeddedDocsRouter: (
+  props: PropsWithChildren<{}>,
+) => JSX.Element | null;
 
 // @public
 export const EntityListDocsGrid: () => JSX.Element;
@@ -153,7 +155,7 @@ export type EntityListDocsTableProps = {
 // @public
 export const EntityTechdocsContent: (props: {
   children?: ReactNode;
-}) => JSX.Element;
+}) => JSX.Element | null;
 
 // @public
 export const isTechDocsAvailable: (entity: Entity) => boolean;

plugins/techdocs/src/Router.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, useRoutes } from 'react-router-dom';
 
 import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
@@ -61,17 +61,25 @@ export const EmbeddedDocsRouter = (props: PropsWithChildren<{}>) => {
   const { children } = props;
   const { entity } = useEntity();
 
+  // Using objects instead of <Route> elements, otherwise "outlet" will be null on sub-pages and add-ons won't render
+  const element = useRoutes([
+    {
+      path: '/*',
+      element: <EntityPageDocs entity={entity} />,
+      children: [
+        {
+          path: '/*',
+          element: children,
+        },
+      ],
+    },
+  ]);
+
   const projectId = entity.metadata.annotations?.[TECHDOCS_ANNOTATION];
 
   if (!projectId) {
     return <MissingAnnotationEmptyState annotation={TECHDOCS_ANNOTATION} />;
   }
 
-  return (
-    <Routes>
-      <Route path="/*" element={<EntityPageDocs entity={entity} />}>
-        {children}
-      </Route>
-    </Routes>
-  );
+  return element;
 };