frontend dependencies: react-router-dom, Yup, other package increments (

#426)

ccm_web/client/src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Route, Switch, useLocation } from 'react-router-dom'
+import { Route, Routes, useLocation } from 'react-router-dom'
 
 import { getCourse } from './api'
 import './App.css'
@@ -72,25 +72,25 @@ function App (): JSX.Element {
 
   return (
     <Layout {...{ features, pathnames }} devMode={globals?.environment === 'development'} csrfToken={csrfToken}>
-      <Switch>
-        <Route exact={true} path='/'>
+      <Routes>
+        <Route path='/' element={
           <Home globals={globals} csrfToken={csrfToken} course={course} setCourse={setCourse} getCourseError={getCourseError} />
-        </Route>
+          } />
         {features.map(feature => {
           return (
-            <Route key={feature.data.id} path={feature.route}>
+            <Route key={feature.data.id} path={feature.route} element={
               <feature.component
                 globals={globals}
                 csrfToken={csrfToken}
                 course={course}
                 title={feature.data.title}
                 helpURLEnding={feature.data.helpURLEnding}
               />
-            </Route>
+            }/>
           )
         })}
-        <Route><NotFound /></Route>
-      </Switch>
+        <Route path="/*" element={<NotFound />}/>
+      </Routes>
     </Layout>
   )
 }

ccm_web/client/src/index.tsx

@@ -1,7 +1,7 @@
 import { SnackbarProvider } from 'notistack'
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { BrowserRouter, Route, Switch } from 'react-router-dom'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { ThemeProvider, StyledEngineProvider } from '@mui/material'
 
 import App from './App'
@@ -22,15 +22,11 @@ root.render(
      <ThemeProvider theme={ccmTheme}>
       <SnackbarProvider maxSnack={3}>
         <BrowserRouter>
-          <Switch>
-            <Route exact={true} path='/access-denied'>
-              <AccessDenied {...helpContactProps} />
-            </Route>
-            <Route exact={true} path='/launch-error'>
-              <LaunchError {...helpContactProps} />
-            </Route>
-            <Route><App /></Route>
-          </Switch>
+          <Routes>
+            <Route path='/access-denied' element={<AccessDenied {...helpContactProps} />}/>
+            <Route path='/launch-error' element={<LaunchError {...helpContactProps} />}/>
+            <Route path='*' element={<App />}/>
+          </Routes>
         </BrowserRouter>
       </SnackbarProvider>
      </ThemeProvider>