feat(components, app, labware-library): migrate to react-router-dom v6.24.1

app/package.json

@@ -53,7 +53,7 @@
     "react-intersection-observer": "^8.33.1",
     "react-markdown": "9.0.1",
     "react-redux": "8.1.2",
-    "react-router-dom": "5.3.4",
+    "react-router-dom": "6.24.1",
     "react-select": "5.4.0",
     "react-simple-keyboard": "^3.7.0",
     "react-viewport-list": "6.3.0",

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,33 +115,37 @@ 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
-                              width="100%"
-                              height="100%"
-                              position={POSITION_RELATIVE}
-                            >
+                  <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
+                                  width="100%"
+                                  height="100%"
+                                  backgroundColor={COLORS.grey10}
+                                  overflow={OVERFLOW_AUTO}
+                                >
+                                  <ModalPortalRoot />
+                                  <Component />
+                                </Box>
                               </Box>
-                            </Box>
-                          </Route>
-                        )
-                      }
-                    )}
-                    <Redirect exact from="/" to="/protocols" />
-                  </Switch>
+                            </>
+                          }
+                          path={path}
+                        />
+                      )
+                    })}
+                    <Route path="/" element={<Navigate to="/protocols" />} />
+                  </Routes>
                   <RobotControlTakeover />
                 </Alerts>
               </Box>
@@ -162,7 +158,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/__tests__/Navbar.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { describe, it } from 'vitest'
 import { screen, render } from '@testing-library/react'
-import { StaticRouter } from 'react-router-dom'
+import { MemoryRouter } from 'react-router-dom'
 
 import { Navbar } from '../Navbar'
 
@@ -16,19 +16,19 @@ const ROUTE_PROPS: RouteProps[] = [
 describe('Navbar', () => {
   it('should render a NavbarLink for every nav location', () => {
     render(
-      <StaticRouter>
+      <MemoryRouter>
         <Navbar routes={ROUTE_PROPS} />
-      </StaticRouter>
+      </MemoryRouter>
     )
     screen.getByRole('link', { name: 'foo' })
     screen.getByRole('link', { name: 'bar' })
     screen.getByRole('link', { name: 'baz' })
   })
   it('should render logo, settings, and help', () => {
     render(
-      <StaticRouter>
+      <MemoryRouter>
         <Navbar routes={ROUTE_PROPS} />
-      </StaticRouter>
+      </MemoryRouter>
     )
     screen.getByRole('img', { name: 'opentrons logo' })
     screen.getByTestId('Navbar_settingsLink')

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/atoms/buttons/__tests__/BackButton.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 import '@testing-library/jest-dom/vitest'
-import { MemoryRouter, Route, Switch } from 'react-router-dom'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
 
 import { renderWithProviders } from '../../../__testing-utils__'
 
@@ -16,14 +16,10 @@ const render = (props?: React.HTMLProps<HTMLButtonElement>) => {
       initialIndex={1}
     >
       <BackButton {...props} />
-      <Switch>
-        <Route exact path="/current-page">
-          this is the current page
-        </Route>
-        <Route exact path="/previous-page">
-          this is the previous page
-        </Route>
-      </Switch>
+      <Routes>
+        <Route path="/current-page" element={<>this is the current page</>} />
+        <Route path="/previous-page" element={<>this is the previous page</>} />
+      </Routes>
     </MemoryRouter>,
     { i18nInstance: i18n }
   )[0]
@@ -49,7 +45,7 @@ describe('BackButton', () => {
     expect(screen.queryByText('this is the previous page')).toBeNull()
   })
 
-  it('goes back one page in history on click if no on click handler provided', () => {
+  it('goes back one page in navigate on click if no on click handler provided', () => {
     render()
 
     screen.getByText('this is the current page')

app/src/index.tsx

@@ -2,15 +2,13 @@
 import React from 'react'
 import ReactDom from 'react-dom/client'
 import { Provider } from 'react-redux'
-
-import { ConnectedRouter } from 'connected-react-router'
+import { BrowserRouter } from 'react-router-dom'
 
 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'
@@ -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/__tests__/CardButton.test.tsx

@@ -7,15 +7,15 @@ import { COLORS } from '@opentrons/components'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { CardButton } from '..'
-import type * as ReactRouterDom from 'react-router-dom'
+import type { NavigateFunction } from 'react-router-dom'
 
-const mockPush = vi.fn()
+const mockNavigate = vi.fn()
 
 vi.mock('react-router-dom', async importOriginal => {
-  const reactRouterDom = await importOriginal<typeof ReactRouterDom>()
+  const reactRouterDom = await importOriginal<NavigateFunction>()
   return {
     ...reactRouterDom,
-    useHistory: () => ({ push: mockPush } as any),
+    useNavigate: () => mockNavigate,
   }
 })
 
@@ -65,6 +65,6 @@ describe('CardButton', () => {
     render(props)
     const button = screen.getByRole('button')
     fireEvent.click(button)
-    expect(mockPush).toHaveBeenCalledWith('/mockPath')
+    expect(mockNavigate).toHaveBeenCalledWith('/mockPath')
   })
 })

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}