labware_library(fix): Use search params to route to labware

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,15 +1,14 @@
 // labware definition helpers
 // TODO(mc, 2019-03-18): move to shared-data?
-import type * as React from 'react'
 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 { getLoadnamePath } from './public-path'
 
+import type * as React from 'react'
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 import type { LabwareList, LabwareDefinition } from './types'
 
@@ -85,7 +84,8 @@ export interface DefinitionRouteProps {
 
 export const DefinitionRoute: React.FC<DefinitionRouteProps> = ({ render }) => {
   const location = useLocation()
-  const loadName = getLoadnamePath(location.pathname)
+  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