Refactor app structure

src/components/router/AsyncRoute.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+import AsyncPage from '../AsyncPage';
+
+export interface AsyncRoute {
+    /** The URL path for this route. */
+    path: string
+    /** The relative path to the page component in the routes directory. */
+    page: string
+}
+
+export const toAsyncPageRoute = (route: AsyncRoute) => (
+    <Route
+        key={route.path}
+        path={route.path}
+        element={<AsyncPage page={route.page} />}
+    />
+);

src/components/router/LegacyRoute.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+import ViewManagerPage, { ViewManagerPageProps } from '../viewManager/ViewManagerPage';
+
+export interface LegacyRoute {
+    path: string,
+    pageProps: ViewManagerPageProps
+}
+
+export function toViewManagerPageRoute(route: LegacyRoute) {
+    return (
+        <Route
+            key={route.path}
+            path={route.path}
+            element={
+                <ViewManagerPage {...route.pageProps} />
+            }
+        />
+    );
+}