chore(react-router-v6): starting to move things to react-router-v6

plugins/circleci/package.json

@@ -37,8 +37,8 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-lazylog": "^4.5.2",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
+    "react-router": "^6.0.0-alpha.5",
+    "react-router-dom": "^6.0.0-alpha.5",
     "react-use": "^14.2.0"
   },
   "devDependencies": {

plugins/circleci/src/components/App.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Switch, Route, MemoryRouter } from 'react-router';
+import { Route, MemoryRouter, Routes } from 'react-router';
 import { BuildsPage, Builds } from '../pages/BuildsPage';
 import { DetailedViewPage, BuildWithSteps } from '../pages/BuildWithStepsPage';
 import { AppStateProvider } from '../state';
@@ -24,14 +24,13 @@ export const App = () => {
   return (
     <AppStateProvider>
       <>
-        <Switch>
-          <Route path="/circleci" exact component={BuildsPage} />
+        <Routes>
+          <Route path="/circleci" element={<BuildsPage />} />
           <Route
             path="/circleci/build/:buildId"
-            exact
-            component={DetailedViewPage}
+            element={<DetailedViewPage />}
           />
-        </Switch>
+        </Routes>
         <Settings />
       </>
     </AppStateProvider>
@@ -45,14 +44,10 @@ export const CircleCIWidget = () => (
   <MemoryRouter initialEntries={['/circleci']}>
     <AppStateProvider>
       <>
-        <Switch>
-          <Route path="/circleci" exact component={Builds} />
-          <Route
-            path="/circleci/build/:buildId"
-            exact
-            component={BuildWithSteps}
-          />
-        </Switch>
+        <Routes>
+          <Route path="/circleci" element={<Builds />} />
+          <Route path="/circleci/build/:buildId" element={<BuildWithSteps />} />
+        </Routes>
         <Settings />
       </>
     </AppStateProvider>