smart bread crumbs can be given a navigation state

src/pages/Device.tsx

@@ -30,6 +30,7 @@ export default function DevicePage() {
   const groupID = useParams<{ groupID: string }>()?.groupID ?? "";
   const { state } = useLocation();
   const [{ as, team, user }] = useGlobalState()
+  // console.log(state)
   const [device, setDevice] = useState<Device>(state?.device ? Device.create(state.device) : Device.create())
   const [loading, setLoading] = useState(false)
   const [permissions, setPermissions] = useState<pond.Permission[]>([])
@@ -54,6 +55,11 @@ export default function DevicePage() {
   const loadDevice = () => {
     // console.log("load device page data")
     if (loading) return
+    console.log(state)
+    if (state?.device) {
+      console.log(Device.create(state.device))
+      return
+    }
     setLoading(true)
     deviceAPI.getPageData(deviceID, getContextKeys(), getContextTypes(), as).then(resp => {
       let device = Device.any(resp.data.device)
@@ -418,7 +424,7 @@ export default function DevicePage() {
     <PageContainer padding={isMobile ? 0 : 2}>
       <Grid container justifyContent={"space-between"}>
         <Grid>
-          <SmartBreadcrumb />
+          <SmartBreadcrumb deviceName={device.name()} />
         </Grid>
         <Grid>
           <AddComponentManualDialog 

src/pages/DeviceSupport.tsx

@@ -134,7 +134,7 @@ export default function DeviceSupport() {
 
 	return (
 		<PageContainer>
-      <SmartBreadcrumb deviceName={device.name()} />
+      <SmartBreadcrumb deviceName={device.name()} state={{device: device}} />
 			<Tabs
 				style={{ position: "sticky" }}
 				value={tabNumber}