fix(router): Expose the react router from the worklist too. (#5062)

platform/app/package.json

@@ -53,7 +53,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.4",
     "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^3.15.1",
+    "@cornerstonejs/dicom-image-loader": "^3.15.6",
     "@emotion/serialize": "^1.1.3",
     "@ohif/core": "3.11.0-beta.38",
     "@ohif/extension-cornerstone": "3.11.0-beta.38",

platform/app/src/routes/Mode/Mode.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { useParams, useLocation, useNavigate } from 'react-router';
+import { useParams, useLocation } from 'react-router';
 import PropTypes from 'prop-types';
 import { utils } from '@ohif/core';
 import { ImageViewerProvider, DragAndDropProvider } from '@ohif/ui-next';
@@ -7,7 +7,6 @@ import { useSearchParams } from '../../hooks';
 import { useAppConfig } from '@state';
 import ViewportGrid from '@components/ViewportGrid';
 import Compose from './Compose';
-import { history } from '../../utils/history';
 import loadModules from '../../pluginImports';
 import { defaultRouteInit } from './defaultRouteInit';
 import { updateAuthServiceAndCleanUrl } from './updateAuthServiceAndCleanUrl';
@@ -52,9 +51,6 @@ export default function ModeRoute({
   const locationRef = useRef(null);
   const isMounted = useRef(false);
 
-  // Expose the react router dom navigation.
-  history.navigate = useNavigate();
-
   if (location !== locationRef.current) {
     layoutTemplateData.current = null;
     locationRef.current = location;

platform/app/src/routes/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Routes, Route, Link } from 'react-router-dom';
+import { Routes, Route, Link, useNavigate } from 'react-router-dom';
 import { ErrorBoundary } from '@ohif/ui-next';
 
 // Route Components
@@ -11,8 +11,9 @@ import NotFound from './NotFound';
 import buildModeRoutes from './buildModeRoutes';
 import PrivateRoute from './PrivateRoute';
 import PropTypes from 'prop-types';
-import { routerBase, routerBasename } from '../utils/publicUrl';
+import { routerBasename } from '../utils/publicUrl';
 import { useAppConfig } from '@state';
+import { history } from '../utils/history';
 
 const NotFoundServer = ({
   message = 'Unable to query for studies at this time. Check your data source configuration or network connection',
@@ -127,6 +128,8 @@ const createRoutes = ({
   ];
 
   function RouteWithErrorBoundary({ route, ...rest }) {
+    history.navigate = useNavigate();
+
     // eslint-disable-next-line react/jsx-props-no-spreading
     return (
       <ErrorBoundary context={`Route ${route.path}`}>

platform/app/src/utils/history.ts

@@ -1,9 +1,16 @@
 import { NavigateFunction } from 'react-router';
 
-type History = {
+interface History {
   navigate: NavigateFunction;
-};
+}
+
+let navigate;
 
 export const history: History = {
-  navigate: null,
+  set navigate(nav: NavigateFunction) {
+    navigate ??= nav;
+  },
+  get navigate() {
+    return navigate;
+  },
 };

platform/core/package.json

@@ -37,8 +37,8 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.4",
     "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/core": "^3.15.1",
-    "@cornerstonejs/dicom-image-loader": "^3.15.1",
+    "@cornerstonejs/core": "^3.15.6",
+    "@cornerstonejs/dicom-image-loader": "^3.15.6",
     "@ohif/ui": "3.11.0-beta.38",
     "cornerstone-math": "0.1.9",
     "dicom-parser": "^1.8.21"