From d8a5a0e51d29bfcd3d4ccf18b6cdb58d75245902 Mon Sep 17 00:00:00 2001
From: Jethary Alcid <66035149+jerader@users.noreply.github.com>
Date: Fri, 27 Sep 2024 10:11:15 -0400
Subject: [PATCH] fix(labware-library): individual labware page routing
 (#16366)

closes RESC-334
---
 labware-library/src/components/App/index.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/labware-library/src/components/App/index.tsx b/labware-library/src/components/App/index.tsx
index ebdea67358d..df1a3a4b96c 100644
--- a/labware-library/src/components/App/index.tsx
+++ b/labware-library/src/components/App/index.tsx
@@ -1,9 +1,10 @@
 // main application wrapper component
 import { useRef, useEffect } from 'react'
 import cx from 'classnames'
-import { useLocation } from 'react-router-dom'
+import { Navigate, Route, Routes, 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'
@@ -50,5 +51,16 @@ export function AppComponent(props: DefinitionRouteRenderProps): JSX.Element {
 }
 
 export function App(): JSX.Element {
-  return <DefinitionRoute render={props => <AppComponent {...props} />} />
+  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>
+  )
 }