Merge pull request #20535 from backstage/mob/external-routes

frontend-*-api: add support for route bindings

packages/app-next/src/App.tsx

@@ -72,14 +72,9 @@ const app = createApp({
       extensions: [entityPageExtension],
     }),
   ],
-  // bindRoutes({ bind }) {
-  //   bind(catalogPlugin.externalRoutes, {
-  //     createComponent: scaffolderPlugin.routes.root,
-  //   });
-  //   bind(scaffolderPlugin.externalRoutes, {
-  //     registerComponent: catalogImportPlugin.routes.importPage,
-  //   });
-  // },
+  bindRoutes({ bind }) {
+    bind(pagesPlugin.externalRoutes, { pageX: pagesPlugin.routes.pageX });
+  },
 });
 
 // const legacyApp = createLegacyApp({ plugins: [legacyGraphiqlPlugin] });

packages/app-next/src/examples/pagesPlugin.tsx

@@ -20,11 +20,17 @@ import {
   createPageExtension,
   createPlugin,
 } from '@backstage/frontend-plugin-api';
-import { useRouteRef, createRouteRef } from '@backstage/core-plugin-api';
+import {
+  useRouteRef,
+  createRouteRef,
+  createExternalRouteRef,
+} from '@backstage/core-plugin-api';
 import { Route, Routes } from 'react-router-dom';
 
 const indexRouteRef = createRouteRef({ id: 'index' });
 const page1RouteRef = createRouteRef({ id: 'page1' });
+export const externalPageXRouteRef = createExternalRouteRef({ id: 'pageX' });
+export const pageXRouteRef = createRouteRef({ id: 'pageX' });
 // const page2RouteRef = createSubRouteRef({
 //   id: 'page2',
 //   parent: page1RouteRef,
@@ -67,6 +73,7 @@ const Page1 = createPageExtension({
   loader: async () => {
     const Component = () => {
       const indexLink = useRouteRef(indexRouteRef);
+      const xLink = useRouteRef(externalPageXRouteRef);
       // const page2Link = useRouteRef(page2RouteRef);
 
       return (
@@ -75,6 +82,7 @@ const Page1 = createPageExtension({
           <Link to={indexLink()}>Go back</Link>
           <Link to="./page2">Page 2</Link>
           {/* <Link to={page2Link()}>Page 2</Link> */}
+          <Link to={xLink()}>Page X</Link>
 
           <div>
             Sub-page content:
@@ -92,6 +100,26 @@ const Page1 = createPageExtension({
   },
 });
 
+const ExternalPage = createPageExtension({
+  id: 'pageX',
+  defaultPath: '/pageX',
+  routeRef: pageXRouteRef,
+  loader: async () => {
+    const Component = () => {
+      const indexLink = useRouteRef(indexRouteRef);
+      // const pageXLink = useRouteRef(pageXRouteRef);
+
+      return (
+        <div>
+          <h1>This is page X</h1>
+          <Link to={indexLink()}>Go back</Link>
+        </div>
+      );
+    };
+    return <Component />;
+  },
+});
+
 export const pagesPlugin = createPlugin({
   id: 'pages',
   // routes: {
@@ -101,5 +129,12 @@ export const pagesPlugin = createPlugin({
   //   //     OR
   //   //   'page1'
   // },
-  extensions: [IndexPage, Page1],
+  routes: {
+    page1: page1RouteRef,
+    pageX: pageXRouteRef,
+  },
+  externalRoutes: {
+    pageX: externalPageXRouteRef,
+  },
+  extensions: [IndexPage, Page1, ExternalPage],
 });