fix app components but not tests

app/src/App/DesktopApp.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
+import { Navigate, Route, Routes, useMatch } from 'react-router-dom'
 import { ErrorBoundary } from 'react-error-boundary'
 import { I18nextProvider } from 'react-i18next'
 
@@ -48,20 +48,17 @@ export const DesktopApp = (): JSX.Element => {
   const desktopRoutes: RouteProps[] = [
     {
       Component: ProtocolsLanding,
-      exact: true,
       name: 'Protocols',
       navLinkTo: '/protocols',
       path: '/protocols',
     },
     {
       Component: ProtocolDetails,
-      exact: true,
       name: 'Protocol Details',
       path: '/protocols/:protocolKey',
     },
     {
       Component: ProtocolTimeline,
-      exact: true,
       name: 'Protocol Timeline',
       path: '/protocols/:protocolKey/timeline',
     },
@@ -73,26 +70,22 @@ export const DesktopApp = (): JSX.Element => {
     },
     {
       Component: DevicesLanding,
-      exact: true,
       name: 'Devices',
       navLinkTo: '/devices',
       path: '/devices',
     },
     {
       Component: DeviceDetails,
-      exact: true,
       name: 'Device',
       path: '/devices/:robotName',
     },
     {
       Component: RobotSettings,
-      exact: true,
       name: 'Robot Settings',
       path: '/devices/:robotName/robot-settings/:robotSettingsTab?',
     },
     {
       Component: CalibrationDashboard,
-      exact: true,
       name: 'Calibration Dashboard',
       path: '/devices/:robotName/robot-settings/calibration/dashboard',
     },
@@ -103,7 +96,6 @@ export const DesktopApp = (): JSX.Element => {
     },
     {
       Component: AppSettings,
-      exact: true,
       name: 'App Settings',
       path: '/app-settings/:appSettingsTab?',
     },
@@ -123,28 +115,32 @@ export const DesktopApp = (): JSX.Element => {
             >
               <Box width="100%">
                 <Alerts>
-                  <Switch>
-                    {desktopRoutes.map(
-                      ({ Component, exact, path }: RouteProps) => {
-                        return (
-                          <Route key={path} exact={exact} path={path}>
-                            <Breadcrumbs />
-                            <Box
-                              position={POSITION_RELATIVE}
-                              width="100%"
-                              height="100%"
-                              backgroundColor={COLORS.grey10}
-                              overflow={OVERFLOW_AUTO}
-                            >
-                              <ModalPortalRoot />
-                              <Component />
-                            </Box>
-                          </Route>
-                        )
-                      }
-                    )}
-                    <Redirect exact from="/" to="/protocols" />
-                  </Switch>
+                  <Routes>
+                    {desktopRoutes.map(({ Component, path }: RouteProps) => {
+                      return (
+                        <Route
+                          key={path}
+                          element={
+                            <>
+                              <Breadcrumbs />
+                              <Box
+                                position={POSITION_RELATIVE}
+                                width="100%"
+                                height="100%"
+                                backgroundColor={COLORS.grey10}
+                                overflow={OVERFLOW_AUTO}
+                              >
+                                <ModalPortalRoot />
+                                <Component />
+                              </Box>
+                            </>
+                          }
+                          path={path}
+                        />
+                      )
+                    })}
+                    <Route path="/" element={<Navigate to="/protocols" />} />
+                  </Routes>
                   <RobotControlTakeover />
                 </Alerts>
               </Box>
@@ -157,7 +153,7 @@ export const DesktopApp = (): JSX.Element => {
 }
 
 function RobotControlTakeover(): JSX.Element | null {
-  const deviceRouteMatch = useRouteMatch({ path: '/devices/:robotName' })
+  const deviceRouteMatch = useMatch('/devices/:robotName')
   const params = deviceRouteMatch?.params as DesktopRouteParams
   const robotName = params?.robotName
   const robot = useRobot(robotName)

app/src/App/DesktopAppFallback.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useDispatch } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
 import { useTrackEvent, ANALYTICS_DESKTOP_APP_ERROR } from '../redux/analytics'
@@ -26,14 +26,14 @@ export function DesktopAppFallback({ error }: FallbackProps): JSX.Element {
   const { t } = useTranslation('app_settings')
   const trackEvent = useTrackEvent()
   const dispatch = useDispatch<Dispatch>()
-  const history = useHistory()
+  const navigate = useNavigate()
   const handleReloadClick = (): void => {
     trackEvent({
       name: ANALYTICS_DESKTOP_APP_ERROR,
       properties: { errorMessage: error.message },
     })
     // route to the root page and initiate an electron browser window reload via app-shell
-    history.push('/')
+    navigate('/', { replace: true })
     dispatch(reloadUi(error.message as string))
   }
 

app/src/App/OnDeviceDisplayApp.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { Switch, Route, Redirect } from 'react-router-dom'
+import { Routes, Route, Navigate } from 'react-router-dom'
 import { css } from 'styled-components'
 import { ErrorBoundary } from 'react-error-boundary'
 
@@ -252,23 +252,31 @@ export function OnDeviceDisplayAppRoutes(): JSX.Element {
   `
 
   return (
-    <Switch>
+    <Routes>
       {ON_DEVICE_DISPLAY_PATHS.map(path => (
-        <Route key={path} exact path={path}>
-          <Box css={TOUCH_SCREEN_STYLE} ref={scrollRef}>
-            <ModalPortalRoot />
-            {getPathComponent(path)}
-          </Box>
-        </Route>
+        <Route
+          key={path}
+          path={path}
+          element={
+            <Box css={TOUCH_SCREEN_STYLE} ref={scrollRef}>
+              <ModalPortalRoot />
+              {getPathComponent(path)}
+            </Box>
+          }
+        />
       ))}
-      {targetPath != null && <Redirect exact from="/" to={targetPath} />}
-    </Switch>
+      {targetPath != null && (
+        <Route path="/" element={<Navigate to={targetPath} />} />
+      )}
+    </Routes>
   )
 }
 
 function TopLevelRedirects(): JSX.Element | null {
   const currentRunRoute = useCurrentRunRoute()
-  return currentRunRoute != null ? <Redirect to={currentRunRoute} /> : null
+  return currentRunRoute != null ? (
+    <Route element={<Navigate to={currentRunRoute} />} />
+  ) : null
 }
 
 function ProtocolReceiptToasts(): null {

app/src/App/types.ts

@@ -6,7 +6,6 @@ export interface RouteProps {
    * drop developed components into slots held by placeholder div components
    */
   Component: React.FC
-  exact?: boolean
   /**
    * a route/page name to render in the nav bar
    */

app/src/atoms/buttons/BackButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
 import {
   ALIGN_CENTER,
@@ -16,7 +16,7 @@ export function BackButton({
   onClick,
   children,
 }: React.HTMLProps<HTMLButtonElement>): JSX.Element {
-  const history = useHistory()
+  const navigate = useNavigate()
   const { t } = useTranslation('shared')
 
   return (
@@ -28,7 +28,7 @@ export function BackButton({
         onClick != null
           ? onClick
           : () => {
-              history.goBack()
+              navigate(-1)
             }
       }
     >

app/src/index.tsx

@@ -3,14 +3,11 @@ import React from 'react'
 import ReactDom from 'react-dom/client'
 import { Provider } from 'react-redux'
 
-import { ConnectedRouter } from 'connected-react-router'
-
 import { ApiClientProvider } from '@opentrons/react-api-client'
 
 import { createLogger } from './logger'
 
 import { uiInitialized } from './redux/shell'
-import { history } from './redux/reducer'
 import { store } from './redux/store'
 
 import '../src/atoms/SoftwareKeyboard/AlphanumericKeyboard'
@@ -20,6 +17,7 @@ import '../src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css'
 
 // component tree
 import { App } from './App'
+import { BrowserRouter } from 'react-router-dom'
 
 const log = createLogger(new URL('', import.meta.url).pathname)
 
@@ -34,10 +32,10 @@ if (container == null) throw new Error('Failed to find the root element')
 const root = ReactDom.createRoot(container)
 root.render(
   <Provider store={store}>
-    <ConnectedRouter history={history}>
+    <BrowserRouter>
       <ApiClientProvider>
         <App />
       </ApiClientProvider>
-    </ConnectedRouter>
+    </BrowserRouter>
   </Provider>
 )

app/src/molecules/CardButton/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -76,12 +76,12 @@ interface CardButtonProps {
 
 export function CardButton(props: CardButtonProps): JSX.Element {
   const { title, iconName, description, destinationPath, disabled } = props
-  const history = useHistory()
+  const navigate = useNavigate()
 
   return (
     <Btn
       onClick={() => {
-        history.push(destinationPath)
+        navigate(destinationPath)
       }}
       width="100%"
       css={CARD_BUTTON_STYLE}

app/src/organisms/Breadcrumbs/index.tsx

@@ -71,8 +71,9 @@ const CrumbLinkInactive = styled(Flex)`
 function BreadcrumbsComponent(): JSX.Element | null {
   const { t } = useTranslation('top_navigation')
   const isOnDevice = useSelector(getIsOnDevice)
-  const { protocolKey, robotName, runId } = useParams<DesktopRouteParams>()
-
+  const { protocolKey, robotName, runId } = useParams<
+    keyof DesktopRouteParams
+  >() as DesktopRouteParams
   const runCreatedAtTimestamp = useRunCreatedAtTimestamp(runId)
 
   const storedProtocol = useSelector((state: State) =>
@@ -148,7 +149,9 @@ function BreadcrumbsComponent(): JSX.Element | null {
 }
 
 export function Breadcrumbs(): JSX.Element | null {
-  const { robotName } = useParams<DesktopRouteParams>()
+  const { robotName } = useParams<
+    keyof DesktopRouteParams
+  >() as DesktopRouteParams
   const robot = useRobot(robotName)
 
   return (

app/src/organisms/CalibrationTaskList/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
 import {
   ALIGN_CENTER,
@@ -55,7 +55,7 @@ export function CalibrationTaskList({
     setShowCompletionScreen,
   ] = React.useState<boolean>(false)
   const { t } = useTranslation(['robot_calibration', 'device_settings'])
-  const history = useHistory()
+  const navigate = useNavigate()
   const { activeIndex, taskList, taskListStatus } = useCalibrationTaskList(
     pipOffsetCalLauncher,
     tipLengthCalLauncher,
@@ -111,7 +111,7 @@ export function CalibrationTaskList({
     <LegacyModal
       title={`${robotName} ${t('calibration_dashboard')}`}
       onClose={() => {
-        history.push(`/devices/${robotName}/robot-settings/calibration`)
+        navigate(`/devices/${robotName}/robot-settings/calibration`)
       }}
       fullPage
       backgroundColor={COLORS.grey10}
@@ -145,7 +145,7 @@ export function CalibrationTaskList({
             <PrimaryButton
               marginTop={SPACING.spacing24}
               onClick={() => {
-                history.push(`/devices/${robotName}/robot-settings/calibration`)
+                navigate(`/devices/${robotName}/robot-settings/calibration`)
               }}
             >
               {t('device_settings:done')}

app/src/organisms/ChangePipette/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import capitalize from 'lodash/capitalize'
 import { useSelector, useDispatch } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { getPipetteNameSpecs } from '@opentrons/shared-data'
 import { SPACING, TYPOGRAPHY, LegacyStyledText } from '@opentrons/components'
@@ -57,7 +57,7 @@ interface Props {
 export function ChangePipette(props: Props): JSX.Element | null {
   const { robotName, mount, closeModal } = props
   const { t } = useTranslation(['change_pipette', 'shared'])
-  const history = useHistory()
+  const navigate = useNavigate()
   const dispatch = useDispatch<Dispatch>()
   const finalRequestId = React.useRef<string | null | undefined>(null)
   const [dispatchApiRequests] = useDispatchApiRequests(dispatchedAction => {
@@ -267,7 +267,7 @@ export function ChangePipette(props: Props): JSX.Element | null {
     const toCalDashboard = (): void => {
       dispatchApiRequests(home(robotName, ROBOT))
       closeModal()
-      history.push(`/devices/${robotName}/robot-settings/calibration/dashboard`)
+      navigate(`/devices/${robotName}/robot-settings/calibration/dashboard`)
     }
 
     exitWizardHeader =