app,create-app: switch to using FlatRoutes

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>
 );