From 2b4ed3f8dec5b17e2a046b63aefe3b8a18803a0c Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sat, 26 Mar 2022 17:53:44 +0100
Subject: [PATCH] app,create-app: migrate to wrapping <Navigate /> in a <Route
 />

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/itchy-owls-rescue.md                     | 13 +++++++++++++
 packages/app/src/App.tsx                            |  2 +-
 .../templates/default-app/packages/app/src/App.tsx  |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/itchy-owls-rescue.md

diff --git a/.changeset/itchy-owls-rescue.md b/.changeset/itchy-owls-rescue.md
new file mode 100644
index 0000000000..45e46e039d
--- /dev/null
+++ b/.changeset/itchy-owls-rescue.md
@@ -0,0 +1,13 @@
+---
+'@backstage/create-app': patch
+---
+
+Update the setup of the app routes in the template to wrap the `<Navigate .../>` redirect in a `<Route .../>`, as this will be required in `react-router` v6 stable.
+
+To apply this change to an existing app, make the following change to `packages/app/src/App.tsx`:
+
+```diff
+   <FlatRoutes>
+-    <Navigate key="/" to="catalog" />
++    <Route path="/" element={<Navigate to="catalog" />} />
+```
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 54eac880ec..9e47ec9ed5 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -145,7 +145,7 @@ const AppRouter = app.getRouter();
 
 const routes = (
   <FlatRoutes>
-    <Navigate key="/" to="catalog" />
+    <Route path="/" element={<Navigate to="catalog" />} />
     {/* TODO(rubenl): Move this to / once its more mature and components exist */}
     <Route path="/home" element={<HomepageCompositionRoot />}>
       {homePage}
diff --git a/packages/create-app/templates/default-app/packages/app/src/App.tsx b/packages/create-app/templates/default-app/packages/app/src/App.tsx
index c4877263f0..c29f635f2b 100644
--- a/packages/create-app/templates/default-app/packages/app/src/App.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/App.tsx
@@ -58,7 +58,7 @@ const AppRouter = app.getRouter();
 
 const routes = (
   <FlatRoutes>
-    <Navigate key="/" to="catalog" />
+    <Route path="/" element={<Navigate to="catalog" />} />
     <Route path="/catalog" element={<CatalogIndexPage />} />
     <Route
       path="/catalog/:namespace/:kind/:name"