Repository navigation
Expand file tree
/
Copy pathapp.tsx
More file actions
67 lines (61 loc) · 1.85 KB
/
Copy pathapp.tsx
File metadata and controls
67 lines (61 loc) · 1.85 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { type ComponentType, lazy, Suspense } from "react";
import { BrowserRouter, Outlet, Route, Routes } from "react-router";
import pages from "@/data/pages.json";
import { AuthLayout } from "@/layouts/auth-layout";
import { DashboardLayout } from "@/layouts/dashboard-layout";
import { PageEffects } from "@/layouts/page-effects";
import { PageMeta } from "@/layouts/page-meta";
// Every page is a file in src/routes, named after its URL (index.tsx is /), and is listed
// in src/data/pages.json with the layout it uses. Each page loads when it is opened.
const files = import.meta.glob<{ default: ComponentType }>("./routes/*.tsx");
const page = (name: string) => {
const file = files[`./routes/${name}.tsx`];
if (!file) {
throw new Error(`src/routes/${name}.tsx is missing`);
}
return lazy(file);
};
const routes = pages.map((entry) => ({
...entry,
Page: page(entry.path === "/" ? "index" : entry.path.slice(1)),
}));
const NotFound = page("pages-404");
const routesFor = (layout: string) =>
routes
.filter((route) => route.layout === layout)
.map(({ path, Page }) => (
<Route key={path} path={path} element={<Page />} />
));
export function App() {
return (
<BrowserRouter basename={import.meta.env.BASE_URL}>
<PageMeta />
<Routes>
<Route
element={
<DashboardLayout>
<Suspense>
<Outlet />
</Suspense>
</DashboardLayout>
}
>
{routesFor("dashboard")}
</Route>
<Route
element={
<AuthLayout>
<Suspense>
<Outlet />
</Suspense>
</AuthLayout>
}
>
{routesFor("auth")}
<Route path="*" element={<NotFound />} />
</Route>
</Routes>
<PageEffects />
</BrowserRouter>
);
}