chore: remove unused routing components

src/RootAppRouter.tsx

@@ -6,9 +6,9 @@ import {
     createHashRouter
 } from 'react-router-dom';
 
+import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
 import { EXPERIMENTAL_APP_ROUTES } from 'apps/experimental/routes/routes';
 import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync';
-import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
 
 const router = createHashRouter([
     ...EXPERIMENTAL_APP_ROUTES,

src/apps/dashboard/routes/routes.tsx

@@ -3,8 +3,8 @@ import { RouteObject } from 'react-router-dom';
 import AppLayout from '../AppLayout';
 import ConnectionRequired from 'components/ConnectionRequired';
 import { ASYNC_ADMIN_ROUTES } from './_asyncRoutes';
-import { toAsyncPageRouteConfig } from 'components/router/AsyncRoute';
+import { toAsyncPageRoute } from 'components/router/AsyncRoute';
-import { toViewManagerPageRouteConfig } from 'components/router/LegacyRoute';
+import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 import { LEGACY_ADMIN_ROUTES } from './_legacyRoutes';
 import ServerContentPage from 'components/ServerContentPage';
 
@@ -24,13 +24,13 @@ export const DASHBOARD_APP_ROUTES: RouteObject[] = [
                     {
                         path: DASHBOARD_APP_PATHS.Dashboard,
                         children: [
-                            ...ASYNC_ADMIN_ROUTES.map(toAsyncPageRouteConfig),
+                            ...ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute),
-                            ...LEGACY_ADMIN_ROUTES.map(toViewManagerPageRouteConfig)
+                            ...LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)
                         ]
                     },
 
                     /* NOTE: The metadata editor might deserve a dedicated app in the future */
-                    toViewManagerPageRouteConfig({
+                    toViewManagerPageRoute({
                         path: DASHBOARD_APP_PATHS.MetadataManager,
                         pageProps: {
                             controller: 'edititemmetadata',

src/apps/experimental/routes/routes.tsx

@@ -4,9 +4,9 @@ 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 { toAsyncPageRouteConfig } from 'components/router/AsyncRoute';
+import { toAsyncPageRoute } from 'components/router/AsyncRoute';
-import { toViewManagerPageRouteConfig } from 'components/router/LegacyRoute';
+import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
-import { toRedirectRouteConfig } from 'components/router/Redirect';
+import { toRedirectRoute } from 'components/router/Redirect';
 import AppLayout from '../AppLayout';
 import { ASYNC_USER_ROUTES } from './asyncRoutes';
 import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
@@ -20,19 +20,19 @@ export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
                 /* User routes: Any child route of this layout is authenticated */
                 element: <ConnectionRequired isUserRequired />,
                 children: [
-                    ...ASYNC_USER_ROUTES.map(toAsyncPageRouteConfig),
+                    ...ASYNC_USER_ROUTES.map(toAsyncPageRoute),
-                    ...LEGACY_USER_ROUTES.map(toViewManagerPageRouteConfig)
+                    ...LEGACY_USER_ROUTES.map(toViewManagerPageRoute)
                 ]
             },
 
             /* Public routes */
             { index: true, loader: () => redirect('/home.html') },
-            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRouteConfig)
+            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)
         ]
     },
 
     /* Redirects for old paths */
-    ...REDIRECTS.map(toRedirectRouteConfig),
+    ...REDIRECTS.map(toRedirectRoute),
 
     /* Ignore dashboard routes */
     ...Object.entries(DASHBOARD_APP_PATHS).map(([, path]) => ({

src/apps/stable/routes/routes.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 
 import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
 import ConnectionRequired from 'components/ConnectionRequired';
-import { toAsyncPageRouteConfig } from 'components/router/AsyncRoute';
+import { toAsyncPageRoute } from 'components/router/AsyncRoute';
-import { toViewManagerPageRouteConfig } from 'components/router/LegacyRoute';
+import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
-import { toRedirectRouteConfig } from 'components/router/Redirect';
+import { toRedirectRoute } from 'components/router/Redirect';
 import AppLayout from '../AppLayout';
 import { REDIRECTS } from './_redirects';
 import { ASYNC_USER_ROUTES } from './asyncRoutes';
@@ -20,14 +20,14 @@ export const STABLE_APP_ROUTES: RouteObject[] = [
                 /* User routes */
                 element: <ConnectionRequired isUserRequired />,
                 children: [
-                    ...ASYNC_USER_ROUTES.map(toAsyncPageRouteConfig),
+                    ...ASYNC_USER_ROUTES.map(toAsyncPageRoute),
-                    ...LEGACY_USER_ROUTES.map(toViewManagerPageRouteConfig)
+                    ...LEGACY_USER_ROUTES.map(toViewManagerPageRoute)
                 ]
             },
 
             /* Public routes */
             { index: true, loader: () => redirect('/home.html') },
-            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRouteConfig),
+            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute),
 
             /* Suppress warnings for unhandled routes */
             { path: '*', element: null }
@@ -35,7 +35,7 @@ export const STABLE_APP_ROUTES: RouteObject[] = [
     },
 
     /* Redirects for old paths */
-    ...REDIRECTS.map(toRedirectRouteConfig),
+    ...REDIRECTS.map(toRedirectRoute),
 
     /* Ignore dashboard routes */
     ...Object.entries(DASHBOARD_APP_PATHS).map(([, path]) => ({

src/components/router/AsyncRoute.tsx

@@ -1,6 +1,5 @@
 import loadable, { LoadableComponent } from '@loadable/component';
 import React from 'react';
-import { Route } from 'react-router-dom';
 
 export enum AsyncRouteType {
     Stable,
@@ -42,32 +41,7 @@ const StableAsyncPage = loadable(
     { cacheKey: (props: AsyncPageProps) => props.page }
 );
 
-export const toAsyncPageRoute = ({ path, page, element, type = AsyncRouteType.Stable }: AsyncRoute) => {
+export function toAsyncPageRoute({ path, page, element, type = AsyncRouteType.Stable }: AsyncRoute) {
-    let Element = element;
-    if (!Element) {
-        switch (type) {
-            case AsyncRouteType.Dashboard:
-                Element = DashboardAsyncPage;
-                break;
-            case AsyncRouteType.Experimental:
-                Element = ExperimentalAsyncPage;
-                break;
-            case AsyncRouteType.Stable:
-            default:
-                Element = StableAsyncPage;
-        }
-    }
-
-    return (
-        <Route
-            key={path}
-            path={path}
-            element={<Element page={page ?? path} />}
-        />
-    );
-};
-
-export function toAsyncPageRouteConfig({ path, page, element, type = AsyncRouteType.Stable }: AsyncRoute) {
     let Element = element;
     if (!Element) {
         switch (type) {

src/components/router/HistoryRouter.tsx

@@ -1,48 +0,0 @@
-import React, { useLayoutEffect } from 'react';
-import { HistoryRouterProps, Router } from 'react-router-dom';
-import { Update } from 'history';
-
-/** Strips leading "!" from paths */
-const normalizePath = (pathname: string) => pathname.replace(/^!/, '');
-
-/**
- * A slightly customized version of the HistoryRouter from react-router-dom.
- * We need to use HistoryRouter to have a shared history state between react-router and appRouter, but it does not seem
- * to be properly exported in the upstream package.
- * We also needed some customizations to handle #! routes.
- * Refs: https://github.com/remix-run/react-router/blob/v6.3.0/packages/react-router-dom/index.tsx#L222
- */
-export function HistoryRouter({ basename, children, history }: HistoryRouterProps) {
-    const [state, setState] = React.useState<Update>({
-        action: history.action,
-        location: history.location
-    });
-
-    useLayoutEffect(() => {
-        const onHistoryChange = (update: Update) => {
-            if (update.location.pathname.startsWith('!')) {
-                // When the location changes, we need to check for #! paths and replace the location with the "!" stripped
-                history.replace(normalizePath(update.location.pathname), update.location.state);
-            } else {
-                setState(update);
-            }
-        };
-
-        history.listen(onHistoryChange);
-    }, [ history ]);
-
-    return (
-        <Router
-            basename={basename}
-            // eslint-disable-next-line react/no-children-prop
-            children={children}
-            location={{
-                ...state.location,
-                // The original location does not get replaced with the normalized version, so we need to strip it here
-                pathname: normalizePath(state.location.pathname)
-            }}
-            navigationType={state.action}
-            navigator={history}
-        />
-    );
-}

src/components/router/LegacyRoute.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Route } from 'react-router-dom';
 
 import ViewManagerPage, { ViewManagerPageProps } from '../viewManager/ViewManagerPage';
 
@@ -9,18 +8,6 @@ export interface LegacyRoute {
 }
 
 export function toViewManagerPageRoute(route: LegacyRoute) {
-    return (
-        <Route
-            key={route.path}
-            path={route.path}
-            element={
-                <ViewManagerPage {...route.pageProps} />
-            }
-        />
-    );
-}
-
-export function toViewManagerPageRouteConfig(route: LegacyRoute) {
     return {
         path: route.path,
         element: <ViewManagerPage {...route.pageProps} />

src/components/router/Redirect.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Navigate, Route, RouteObject, useLocation } from 'react-router-dom';
+import { Navigate, RouteObject, useLocation } from 'react-router-dom';
 
 export interface Redirect {
     from: string
@@ -17,17 +17,7 @@ const RedirectWithSearch = ({ to }: { to: string }) => {
     );
 };
 
-export function toRedirectRoute({ from, to }: Redirect) {
+export function toRedirectRoute({ from, to }: Redirect): RouteObject {
-    return (
-        <Route
-            key={from}
-            path={from}
-            element={<RedirectWithSearch to={to} />}
-        />
-    );
-}
-
-export function toRedirectRouteConfig({ from, to }: Redirect): RouteObject {
     return {
         path: from,
         element: <RedirectWithSearch to={to} />