Bazaar plugin: Remove 'Router' as 'RoutedTabs' children

During the 'react-router-dom' upgrades the Bazaar routing broke. This
patch removes the wrapping 'Router' from the 'RouterTabs' children.

Opening the Bazaar plugin would result in the followin error:

"A <Route> is only ever to be used as the child of <Routes> element,
never rendered directly. Please wrap your <Route> in a <Routes>."

Also removed 'react-router-dom' as a peer dependency of the bazaar
plugin.

Signed-off-by: Niklas Aronsson <niklasar@axis.com>

.changeset/gorgeous-boats-prove.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-bazaar': patch
+---
+
+Fixed broken routing by removing the wrapping `Router` from the `RoutedTabs` children.

plugins/bazaar/package.json

@@ -41,8 +41,7 @@
     "react-use": "^17.2.4"
   },
   "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0",
-    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
+    "react": "^16.13.1 || ^17.0.0"
   },
   "devDependencies": {
     "@backstage/cli": "^0.19.0-next.1",

plugins/bazaar/src/components/HomePage/HomePage.tsx

@@ -16,7 +16,6 @@
 
 import React from 'react';
 import { Header, RoutedTabs } from '@backstage/core-components';
-import { Route } from 'react-router-dom';
 import { SortView } from '../SortView';
 import { About } from '../About';
 
@@ -25,12 +24,12 @@ export const HomePage = () => {
     {
       path: '/',
       title: 'Home',
-      children: <Route path="/" element={<SortView />} />,
+      children: <SortView />,
     },
     {
       path: '/about',
       title: 'About',
-      children: <Route path="/about" element={<About />} />,
+      children: <About />,
     },
   ];
 

yarn.lock

@@ -4168,7 +4168,6 @@ __metadata:
     react-use: ^17.2.4
   peerDependencies:
     react: ^16.13.1 || ^17.0.0
-    react-router-dom: 6.0.0-beta.0 || ^6.3.0
   languageName: unknown
   linkType: soft