Merge pull request #5167 from thornbill/fix-routing-crash

Fix stable app crash due to missing nav components

src/RootAppRouter.tsx

@@ -29,6 +29,10 @@ export default function RootAppRouter({ history }: Readonly<{ history: History}>
     return <RouterProvider router={router} />;
 }
 
+/**
+ * Layout component that renders legacy components required on all pages.
+ * NOTE: The app will crash if these get removed from the DOM.
+ */
 function RootAppLayout() {
     return (
         <>

src/apps/experimental/routes/routes.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { RouteObject, redirect } from 'react-router-dom';
 
 import { REDIRECTS } from 'apps/dashboard/routes/_redirects';
-import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
 import ConnectionRequired from 'components/ConnectionRequired';
 import { toAsyncPageRoute } from 'components/router/AsyncRoute';
 import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
@@ -32,11 +31,5 @@ export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
     },
 
     /* Redirects for old paths */
-    ...REDIRECTS.map(toRedirectRoute),
+    ...REDIRECTS.map(toRedirectRoute)
-
-    /* Ignore dashboard routes */
-    ...Object.entries(DASHBOARD_APP_PATHS).map(([, path]) => ({
-        path: `/${path}/*`,
-        element: null
-    }))
 ];

src/apps/stable/AppLayout.tsx

@@ -1,24 +1,12 @@
 import React from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 
 import AppBody from 'components/AppBody';
-import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
-import Backdrop from 'components/Backdrop';
-import AppHeader from 'components/AppHeader';
 
 export default function AppLayout() {
-    const location = useLocation();
-    const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
-        .some(path => location.pathname.startsWith(`/${path}`));
-
     return (
-        <>
+        <AppBody>
-            <Backdrop />
+            <Outlet />
-            <AppHeader isHidden={isNewLayoutPath} />
+        </AppBody>
-
-            <AppBody>
-                <Outlet />
-            </AppBody>
-        </>
     );
 }

src/apps/stable/AppRouter.tsx

@@ -1,18 +1,42 @@
 import { History } from '@remix-run/router';
 import React from 'react';
-import { RouterProvider, createHashRouter } from 'react-router-dom';
+import { Outlet, RouterProvider, createHashRouter, useLocation } from 'react-router-dom';
 
-import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
 import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync';
 import { STABLE_APP_ROUTES } from './routes/routes';
+import Backdrop from 'components/Backdrop';
+import AppHeader from 'components/AppHeader';
+import { DASHBOARD_APP_PATHS, DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
 
-const router = createHashRouter([
+const router = createHashRouter([{
-    ...STABLE_APP_ROUTES,
+    element: <StableAppLayout />,
-    ...DASHBOARD_APP_ROUTES
+    children: [
-]);
+        ...STABLE_APP_ROUTES,
+        ...DASHBOARD_APP_ROUTES
+    ]
+}]);
 
 export default function StableAppRouter({ history }: Readonly<{ history: History }>) {
     useLegacyRouterSync({ router, history });
 
     return <RouterProvider router={router} />;
 }
+
+/**
+ * Layout component that renders legacy components required on all pages.
+ * NOTE: The app will crash if these get removed from the DOM.
+ */
+function StableAppLayout() {
+    const location = useLocation();
+    const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
+        .some(path => location.pathname.startsWith(`/${path}`));
+
+    return (
+        <>
+            <Backdrop />
+            <AppHeader isHidden={isNewLayoutPath} />
+
+            <Outlet />
+        </>
+    );
+}

src/apps/stable/routes/routes.tsx

@@ -1,12 +1,13 @@
 import { RouteObject, redirect } from 'react-router-dom';
 import React from 'react';
 
-import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
 import ConnectionRequired from 'components/ConnectionRequired';
 import { toAsyncPageRoute } from 'components/router/AsyncRoute';
 import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 import { toRedirectRoute } from 'components/router/Redirect';
+
 import AppLayout from '../AppLayout';
+
 import { REDIRECTS } from './_redirects';
 import { ASYNC_USER_ROUTES } from './asyncRoutes';
 import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
@@ -27,20 +28,10 @@ export const STABLE_APP_ROUTES: RouteObject[] = [
 
             /* Public routes */
             { index: true, loader: () => redirect('/home.html') },
-            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute),
+            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)
-
-            /* Suppress warnings for unhandled routes */
-            { path: '*', element: null }
         ]
     },
 
     /* Redirects for old paths */
-    ...REDIRECTS.map(toRedirectRoute),
+    ...REDIRECTS.map(toRedirectRoute)
-
-    /* Ignore dashboard routes */
-    ...Object.entries(DASHBOARD_APP_PATHS).map(([, path]) => ({
-        path: `/${path}/*`,
-        element: null
-    }))
-
 ];