diff --git a/src/components/AsyncPage.tsx b/src/components/AsyncPage.tsx
new file mode 100644
index 0000000000..4c1e6fa7a2
--- /dev/null
+++ b/src/components/AsyncPage.tsx
@@ -0,0 +1,17 @@
+import loadable from '@loadable/component';
+
+interface AsyncPageProps {
+    /** The relative path to the page component in the routes directory. */
+    page: string
+}
+
+/**
+ * Page component that uses the loadable component library to load pages defined in the routes directory asynchronously
+ * with code splitting.
+ */
+const AsyncPage = loadable(
+    (props: AsyncPageProps) => import(/* webpackChunkName: "[request]" */ `../routes/${props.page}`),
+    { cacheKey: (props: AsyncPageProps) => props.page }
+);
+
+export default AsyncPage;
diff --git a/src/routes/asyncRoutes/admin.ts b/src/routes/asyncRoutes/admin.ts
new file mode 100644
index 0000000000..2d001ed1e4
--- /dev/null
+++ b/src/routes/asyncRoutes/admin.ts
@@ -0,0 +1,10 @@
+import { AsyncRoute } from '.';
+
+export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
+    { path: 'usernew.html', page: 'user/usernew' },
+    { path: 'userprofiles.html', page: 'user/userprofiles' },
+    { path: 'useredit.html', page: 'user/useredit' },
+    { path: 'userlibraryaccess.html', page: 'user/userlibraryaccess' },
+    { path: 'userparentalcontrol.html', page: 'user/userparentalcontrol' },
+    { path: 'userpassword.html', page: 'user/userpassword' }
+];
diff --git a/src/routes/asyncRoutes/index.tsx b/src/routes/asyncRoutes/index.tsx
new file mode 100644
index 0000000000..661a41d840
--- /dev/null
+++ b/src/routes/asyncRoutes/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+import AsyncPage from '../../components/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} />}
+    />
+);
diff --git a/src/routes/asyncRoutes/user.ts b/src/routes/asyncRoutes/user.ts
new file mode 100644
index 0000000000..1abf687034
--- /dev/null
+++ b/src/routes/asyncRoutes/user.ts
@@ -0,0 +1,8 @@
+import { AsyncRoute } from '.';
+
+export const ASYNC_USER_ROUTES: AsyncRoute[] = [
+    { path: 'search.html', page: 'search' },
+    { path: 'userprofile.html', page: 'user/userprofile' },
+    { path: 'home.html', page: 'home' },
+    { path: 'movies.html', page: 'movies' }
+];
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 45b18447e3..231a18db11 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,61 +1,25 @@
-import loadable from '@loadable/component';
 import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
+import { toAsyncPageRoute } from './asyncRoutes';
+import { ASYNC_ADMIN_ROUTES } from './asyncRoutes/admin';
+import { ASYNC_USER_ROUTES } from './asyncRoutes/user';
 import ConnectionRequired from '../components/ConnectionRequired';
 import ServerContentPage from '../components/ServerContentPage';
 import { LEGACY_ADMIN_ROUTES, LEGACY_USER_ROUTES, toViewManagerPageRoute } from './legacyRoutes';
 
-interface AsyncPageProps {
-    page: string
-}
-
-const AsyncPage = loadable(
-    (props: AsyncPageProps) => import(/* webpackChunkName: "[request]" */ `./${props.page}`),
-    { cacheKey: (props: AsyncPageProps) => props.page }
-);
-
-interface AsyncRoute {
-    path: string
-    page: string
-}
-
-const toAsyncPageRoute = (route: AsyncRoute) => (
-    <Route
-        key={route.path}
-        path={route.path}
-        element={<AsyncPage page={route.page} />}
-    />
-);
-
-const USER_ROUTES: AsyncRoute[] = [
-    { path: 'search.html', page: 'search' },
-    { path: 'userprofile.html', page: 'user/userprofile' },
-    { path: 'home.html', page: 'home' },
-    { path: 'movies.html', page: 'movies' }
-];
-
-const ADMIN_ROUTES: AsyncRoute[] = [
-    { path: 'usernew.html', page: 'user/usernew' },
-    { path: 'userprofiles.html', page: 'user/userprofiles' },
-    { path: 'useredit.html', page: 'user/useredit' },
-    { path: 'userlibraryaccess.html', page: 'user/userlibraryaccess' },
-    { path: 'userparentalcontrol.html', page: 'user/userparentalcontrol' },
-    { path: 'userpassword.html', page: 'user/userpassword' }
-];
-
 const AppRoutes = () => (
     <Routes>
         <Route path='/'>
             {/* User routes */}
             <Route path='/' element={<ConnectionRequired />}>
-                {USER_ROUTES.map(toAsyncPageRoute)}
+                {ASYNC_USER_ROUTES.map(toAsyncPageRoute)}
                 {LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
             </Route>
 
             {/* Admin routes */}
             <Route path='/' element={<ConnectionRequired isAdminRequired />}>
-                {ADMIN_ROUTES.map(toAsyncPageRoute)}
+                {ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute)}
                 {LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
 
                 <Route path='configurationpage' element={