ANGJustinl/whale-town-end-v2
1
0
Fork 0
forked from xiangwang25/whale-town-end-v2
Code Pull Requests Activity

perf: lazy-load admin routes

Browse Source
This commit is contained in:
xiangwang
2026-09-08 22:59:03 +08:00
parent 513a3eba31
commit f8f6ee6a5e
2 changed files with 50 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
client/src/app/App.tsx
View File

@@ -1,29 +1,41 @@
import { ConfigProvider } from 'antd';
import { lazy, Suspense } from 'react';
import { ConfigProvider, Spin } from 'antd';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { AdminLayout } from './AdminLayout';
import { LoginPage } from '../pages/LoginPage';
import { UsersPage } from '../pages/UsersPage';
import { LogsPage } from '../pages/LogsPage';
import { InvitationCodesPage } from '../pages/InvitationCodesPage';
import { isAuthed } from '../lib/adminAuth';
const AdminLayout = lazy(() => import('./AdminLayout').then((module) => ({ default: module.AdminLayout })));
const LoginPage = lazy(() => import('../pages/LoginPage').then((module) => ({ default: module.LoginPage })));
const UsersPage = lazy(() => import('../pages/UsersPage').then((module) => ({ default: module.UsersPage })));
const LogsPage = lazy(() => import('../pages/LogsPage').then((module) => ({ default: module.LogsPage })));
const InvitationCodesPage = lazy(() => import('../pages/InvitationCodesPage').then((module) => ({ default: module.InvitationCodesPage })));
function RouteLoading() {
return (
<div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center' }}>
<Spin size="large" />
</div>
);
}
export function App() {
return (
<ConfigProvider>
<BrowserRouter basename={import.meta.env.BASE_URL}>
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route
path="/"
element={isAuthed() ? <AdminLayout /> : <Navigate to="/login" replace />}
>
<Route index element={<Navigate to="/users" replace />} />
<Route path="users" element={<UsersPage />} />
<Route path="invitation-codes" element={<InvitationCodesPage />} />
<Route path="logs" element={<LogsPage />} />
</Route>
<Route path="*" element={<Navigate to={isAuthed() ? '/users' : '/login'} replace />} />
</Routes>
<Suspense fallback={<RouteLoading />}>
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route
path="/"
element={isAuthed() ? <AdminLayout /> : <Navigate to="/login" replace />}
>
<Route index element={<Navigate to="/users" replace />} />
<Route path="users" element={<UsersPage />} />
<Route path="invitation-codes" element={<InvitationCodesPage />} />
<Route path="logs" element={<LogsPage />} />
</Route>
<Route path="*" element={<Navigate to={isAuthed() ? '/users' : '/login'} replace />} />
</Routes>
</Suspense>
</BrowserRouter>
</ConfigProvider>
);