app,create-app: switch to using FlatRoutes

.changeset/green-coins-confess.md

@@ -0,0 +1,40 @@
+---
+'@backstage/create-app': patch
+---
+
+Migrate to using `FlatRoutes` from `@backstage/core` for the root app routes.
+
+This is the first step in migrating applications as mentioned here: https://backstage.io/docs/plugins/composability#porting-existing-apps.
+
+To apply this change to an existing app, switch out the `Routes` component from `react-router` to `FlatRoutes` from `@backstage/core`.
+This also allows you to remove any `/*` suffixes on the route paths. For example:
+
+```diff
+import {
+   OAuthRequestDialog,
+   SidebarPage,
+   createRouteRef,
++  FlatRoutes,
+ } from '@backstage/core';
+ import { AppSidebar } from './sidebar';
+-import { Route, Routes, Navigate } from 'react-router';
++import { Route, Navigate } from 'react-router';
+ import { Router as CatalogRouter } from '@backstage/plugin-catalog';
+...
+         <AppSidebar />
+-        <Routes>
++        <FlatRoutes>
+...
+           <Route
+-            path="/catalog/*"
++            path="/catalog"
+             element={<CatalogRouter EntityPage={EntityPage} />}
+           />
+-          <Route path="/docs/*" element={<DocsRouter />} />
++          <Route path="/docs" element={<DocsRouter />} />
+...
+           <Route path="/settings" element={<SettingsRouter />} />
+-        </Routes>
++        </FlatRoutes>
+       </SidebarPage>
+```

packages/app/src/App.tsx

@@ -20,6 +20,7 @@ import {
   OAuthRequestDialog,
   SignInPage,
   createRouteRef,
+  FlatRoutes,
 } from '@backstage/core';
 import React from 'react';
 import Root from './components/Root';
@@ -35,7 +36,7 @@ import { Router as LighthouseRouter } from '@backstage/plugin-lighthouse';
 import { Router as RegisterComponentRouter } from '@backstage/plugin-register-component';
 import { Router as SettingsRouter } from '@backstage/plugin-user-settings';
 import { Router as ImportComponentRouter } from '@backstage/plugin-catalog-import';
-import { Route, Routes, Navigate } from 'react-router';
+import { Route, Navigate } from 'react-router';
 
 import { EntityPage } from './components/catalog/EntityPage';
 
@@ -65,31 +66,31 @@ const catalogRouteRef = createRouteRef({
   title: 'Service Catalog',
 });
 
-const AppRoutes = () => (
-  <Routes>
+const routes = (
+  <FlatRoutes>
     <Navigate key="/" to="/catalog" />
     <Route
-      path="/catalog-import/*"
+      path="/catalog-import"
       element={<ImportComponentRouter catalogRouteRef={catalogRouteRef} />}
     />
     <Route
-      path={`${catalogRouteRef.path}/*`}
+      path={`${catalogRouteRef.path}`}
       element={<CatalogRouter EntityPage={EntityPage} />}
     />
-    <Route path="/docs/*" element={<DocsRouter />} />
+    <Route path="/docs" element={<DocsRouter />} />
     <Route
       path="/tech-radar"
       element={<TechRadarRouter width={1500} height={800} />}
     />
     <Route path="/graphiql" element={<GraphiQLRouter />} />
-    <Route path="/lighthouse/*" element={<LighthouseRouter />} />
+    <Route path="/lighthouse" element={<LighthouseRouter />} />
     <Route
       path="/register-component"
       element={<RegisterComponentRouter catalogRouteRef={catalogRouteRef} />}
     />
     <Route path="/settings" element={<SettingsRouter />} />
     {...deprecatedAppRoutes}
-  </Routes>
+  </FlatRoutes>
 );
 
 const App = () => (
@@ -97,9 +98,7 @@ const App = () => (
     <AlertDisplay />
     <OAuthRequestDialog />
     <AppRouter>
-      <Root>
-        <AppRoutes />
-      </Root>
+      <Root>{routes}</Root>
     </AppRouter>
   </AppProvider>
 );

packages/create-app/templates/default-app/packages/app/src/App.tsx

@@ -5,11 +5,12 @@ import {
   OAuthRequestDialog,
   SidebarPage,
   createRouteRef,
+  FlatRoutes,
 } from '@backstage/core';
 import { apis } from './apis';
 import * as plugins from './plugins';
 import { AppSidebar } from './sidebar';
-import { Route, Routes, Navigate } from 'react-router';
+import { Route, Navigate } from 'react-router';
 import { Router as CatalogRouter } from '@backstage/plugin-catalog';
 import { Router as DocsRouter } from '@backstage/plugin-techdocs';
 import { Router as ImportComponentRouter } from '@backstage/plugin-catalog-import';
@@ -41,13 +42,13 @@ const App = () => (
     <AppRouter>
       <SidebarPage>
         <AppSidebar />
-        <Routes>
+        <FlatRoutes>
           <Navigate key="/" to="/catalog" />
           <Route
-            path="/catalog/*"
+            path="/catalog"
             element={<CatalogRouter EntityPage={EntityPage} />}
           />
-          <Route path="/docs/*" element={<DocsRouter />} />
+          <Route path="/docs" element={<DocsRouter />} />
           <Route
             path="/tech-radar"
             element={<TechRadarRouter width={1500} height={800} />}
@@ -62,7 +63,7 @@ const App = () => (
           />
           <Route path="/settings" element={<SettingsRouter />} />
           {deprecatedAppRoutes}
-        </Routes>
+        </FlatRoutes>
       </SidebarPage>
     </AppRouter>
   </AppProvider>