[grid] Upgrading to react-router-dom v6

Author: diemol

java/src/org/openqa/selenium/grid/web/GridUiRoute.java

@@ -44,7 +44,7 @@ public GridUiRoute() {
       ResourceHandler uiHandler = new ResourceHandler(new ClassPathResource(uiRoot, GRID_RESOURCE));
       HttpResponse uiRedirect = new HttpResponse()
         .setStatus(HTTP_MOVED_TEMP)
-        .addHeader("Location", "/ui/index.html");
+        .addHeader("Location", "/ui");
       routes = Route.combine(
         get("/").to(() -> req -> uiRedirect),
         get("/grid/console").to(() -> req -> uiRedirect),

javascript/grid-ui/package-lock.json

@@ -18,7 +18,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-modal": "^3.14.3",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.3.0",
     "source-map-explorer": "^2.5.2"
   },
   "scripts": {

javascript/grid-ui/package.json

@@ -21,7 +21,7 @@ import {
   InMemoryCache,
   NormalizedCacheObject
 } from '@apollo/client'
-import { Route, Switch } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom'
 import React, { ReactNode } from 'react'
 import ReactModal from 'react-modal'
 import { GridConfig } from './config'
@@ -154,22 +154,14 @@ class App extends React.Component<AppProps, AppState> {
           )}
           <main className={classes.content}>
             <Container maxWidth={false} className={classes.container}>
-              <Switch>
-                <Route exact path="/sessions">
-                  <Sessions {...this.props}/>
-                </Route>
-                <Route exact path="/help">
-                  <Help {...this.props}/>
-                </Route>
-                <Route exact path="/">
-                  <Overview {...this.props}/>
-                </Route>
-                <Route>
-                  <Help {...this.props}/>
-                </Route>
-              </Switch>
+              <Routes>
+                <Route path="/sessions" element={<Sessions {...this.props}/>}/>
+                <Route path="/help" element={<Help {...this.props}/>}/>
+                <Route path="/" element={<Overview {...this.props}/>}/>
+                <Route path="*" element={<Help {...this.props}/>}/>
+              </Routes>
             </Container>
-            <Footer />
+            <Footer/>
           </main>
         </div>
       </ApolloProvider>