fix(labware-library): use search params to route to labware (#16371)

closes RESC-334

Co-authored-by: Jamey Huffnagle <[email protected]>

labware-library/src/components/App/index.tsx

@@ -1,10 +1,9 @@
 // main application wrapper component
 import { useRef, useEffect } from 'react'
 import cx from 'classnames'
-import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { DefinitionRoute } from '../../definitions'
 import { useFilters } from '../../filters'
-import { getPublicPath } from '../../public-path'
 import { Nav, Breadcrumbs } from '../Nav'
 import { Sidebar } from '../Sidebar'
 import { Page } from './Page'
@@ -51,16 +50,5 @@ export function AppComponent(props: DefinitionRouteRenderProps): JSX.Element {
 }
 
 export function App(): JSX.Element {
-  return (
-    <Routes>
-      <Route
-        path={`${getPublicPath()}:loadName?`}
-        element={
-          <DefinitionRoute render={props => <AppComponent {...props} />} />
-        }
-      />
-      <Route path="/labware" element={<AppComponent definition={null} />} />
-      <Route path="*" element={<Navigate to="/labware" />} />
-    </Routes>
-  )
+  return <DefinitionRoute render={props => <AppComponent {...props} />} />
 }

labware-library/src/components/LabwareList/LabwareCard.tsx

@@ -76,7 +76,7 @@ function Title(props: LabwareCardProps): JSX.Element {
   const { displayName } = props.definition.metadata
 
   return (
-    <Link to={`${getPublicPath()}${loadName}`}>
+    <Link to={`${getPublicPath()}`} search={`loadName=${loadName}`}>
       <h2 className={styles.title}>
         <span className={styles.title_text}>{displayName}</span>
         <Icon className={styles.title_icon} name="chevron-right" />

labware-library/src/components/ui/Link.tsx

@@ -1,21 +1,23 @@
 // internal link that preserves query parameters
-import type * as React from 'react'
-import { Link as BaseLink, useLocation } from 'react-router-dom'
+import { Link as BaseLink } from 'react-router-dom'
+
+import type { ReactNode } from 'react'
 
 export interface LinkProps {
   to: string
-  children?: React.ReactNode
+  search?: string
+  children?: ReactNode
   className?: string
 }
 
-export function Link({ to, children, className }: LinkProps): JSX.Element {
-  const location = useLocation()
-
+export function Link({
+  to,
+  children,
+  className,
+  search,
+}: LinkProps): JSX.Element {
   return (
-    <BaseLink
-      to={{ pathname: to, search: location.search }}
-      className={className}
-    >
+    <BaseLink to={{ pathname: to, search }} className={className}>
       {children}
     </BaseLink>
   )

labware-library/src/definitions.tsx

@@ -1,14 +1,14 @@
 // labware definition helpers
 // TODO(mc, 2019-03-18): move to shared-data?
-import type * as React from 'react'
-import { useParams } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import groupBy from 'lodash/groupBy'
 import uniq from 'lodash/uniq'
 import {
   LABWAREV2_DO_NOT_LIST,
   getAllDefinitions as _getAllDefinitions,
 } from '@opentrons/shared-data'
 
+import type * as React from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { LabwareList, LabwareDefinition } from './types'
 
@@ -83,7 +83,9 @@ export interface DefinitionRouteProps {
 }
 
 export const DefinitionRoute: React.FC<DefinitionRouteProps> = ({ render }) => {
-  const { loadName } = useParams<{ loadName: string }>()
+  const location = useLocation()
+  const searchParams = new URLSearchParams(location.search)
+  const loadName = searchParams.get('loadName')
   const definition = getDefinition(loadName)
 
   // TODO: handle 404 if loadName exists but definition isn't found