app,create-app: update to use AppRouter

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

.changeset/shy-birds-hammer.md

@@ -0,0 +1,17 @@
+---
+'@backstage/create-app': patch
+---
+
+Updated the app template to use the new `AppRouter` component instead of `app.getRouter()`.
+
+To apply this change to an existing app, make the following change to `packages/app/src/App.tsx`:
+
+```diff
+-import { FlatRoutes } from '@backstage/core-app-api';
++import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
+
+ ...
+
+ const AppProvider = app.getProvider();
+-const AppRouter = app.getRouter();
+```

packages/app/src/App.tsx

@@ -27,7 +27,7 @@ import {
   RELATION_PROVIDES_API,
 } from '@backstage/catalog-model';
 import { createApp } from '@backstage/app-defaults';
-import { FlatRoutes } from '@backstage/core-app-api';
+import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
 import {
   AlertDisplay,
   OAuthRequestDialog,
@@ -146,7 +146,6 @@ const app = createApp({
 });
 
 const AppProvider = app.getProvider();
-const AppRouter = app.getRouter();
 
 const routes = (
   <FlatRoutes>

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

@@ -29,7 +29,7 @@ import { Root } from './components/Root';
 
 import { AlertDisplay, OAuthRequestDialog } from '@backstage/core-components';
 import { createApp } from '@backstage/app-defaults';
-import { FlatRoutes } from '@backstage/core-app-api';
+import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
 import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
@@ -54,7 +54,6 @@ const app = createApp({
 });
 
 const AppProvider = app.getProvider();
-const AppRouter = app.getRouter();
 
 const routes = (
   <FlatRoutes>