Merge pull request #15110 from backstage/rugvip/router

core-app-api: add app.createRoot() to replace app.getProvider()

.changeset/fuzzy-rivers-search.md

@@ -0,0 +1,50 @@
+---
+'@backstage/core-app-api': minor
+---
+
+Added a new `AppRouter` component and `app.createRoot()` method that replaces `app.getRouter()` and `app.getProvider()`, which are now deprecated. The new `AppRouter` component is a drop-in replacement for the old router component, while the new `app.createRoot()` method is used instead of the old provider component.
+
+An old app setup might look like this:
+
+```tsx
+const app = createApp(/* ... */);
+
+const AppProvider = app.getProvider();
+const AppRouter = app.getRouter();
+
+const routes = ...;
+
+const App = () => (
+  <AppProvider>
+    <AlertDisplay />
+    <OAuthRequestDialog />
+    <AppRouter>
+      <Root>{routes}</Root>
+    </AppRouter>
+  </AppProvider>
+);
+
+export default App;
+```
+
+With these new APIs, the setup now looks like this:
+
+```tsx
+import { AppRouter } from '@backstage/core-app-api';
+
+const app = createApp(/* ... */);
+
+const routes = ...;
+
+export default app.createRoot(
+  <>
+    <AlertDisplay />
+    <OAuthRequestDialog />
+    <AppRouter>
+      <Root>{routes}</Root>
+    </AppRouter>
+  </>,
+);
+```
+
+Note that `app.createRoot()` accepts a React element, rather than a component.

.changeset/shy-birds-hammer.md

@@ -0,0 +1,48 @@
+---
+'@backstage/create-app': patch
+---
+
+Updated the app template to use the new `AppRouter` component instead of `app.getRouter()`, as well as `app.createRoot()` instead of `app.getProvider()`.
+
+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();
+
+ ...
+
+-const App = () => (
++export default app.createRoot(
+-  <AppProvider>
++  <>
+     <AlertDisplay />
+     <OAuthRequestDialog />
+     <AppRouter>
+       <Root>{routes}</Root>
+     </AppRouter>
+-  </AppProvider>
++  </>,
+ );
+```
+
+The final export step should end up looking something like this:
+
+```tsx
+export default app.createRoot(
+  <>
+    <AlertDisplay />
+    <OAuthRequestDialog />
+    <AppRouter>
+      <Root>{routes}</Root>
+    </AppRouter>
+  </>,
+);
+```
+
+Note that `app.createRoot()` accepts a React element, rather than a component.