michael/houhou
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases 2 Packages Wiki Activity

un-lazy load

Browse source
This commit is contained in:
Michael Zhang 2023-06-14 19:51:37 -05:00
parent 53cd4192a4
commit caff58cd49
1 changed files with 39 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/App.tsx
View file

@ -5,6 +5,12 @@ import { createBrowserRouter } from "react-router-dom";
import { Outlet, Route, createRoutesFromElements, matchPath, useLocation } from "react-router"; import { Outlet, Route, createRoutesFromElements, matchPath, useLocation } from "react-router";
import { StrictMode } from "react"; import { StrictMode } from "react";
import { Component as KanjiPane } from "./panes/KanjiPane";
import { Component as SettingsPane } from "./panes/SettingsPane";
import { Component as SrsPane } from "./panes/SrsPane";
import { Component as SrsReviewPane } from "./panes/SrsReviewPane";
import { Component as VocabPane } from "./panes/VocabPane";
import styles from "./App.module.scss"; import styles from "./App.module.scss";
function Layout() { function Layout() {
@ -49,7 +55,8 @@ export default function App() {
key={`route-${route.key}-${subRoute.key}`} key={`route-${route.key}-${subRoute.key}`}
index={idx + idx2 == 0} index={idx + idx2 == 0}
path={subRoute.path} path={subRoute.path}
lazy={() => import(`./panes/${subRoute.element ?? route.element}.tsx`)} element={subRoute.element ?? route.element}
// lazy={() => import(`./panes/${subRoute.element ?? route.element}.tsx`)}
/> />
); );
}); });
@ -59,7 +66,8 @@ export default function App() {
key={`route-${route.key}`} key={`route-${route.key}`}
index={idx == 0} index={idx == 0}
path={route.path} path={route.path}
lazy={() => import(`./panes/${route.element}.tsx`)} element={route.element}
// lazy={() => import(`./panes/${route.element}.tsx`)}
/> />
); );
} }
@ -84,34 +92,55 @@ type NavLinkPath =
} }
| { | {
path?: undefined; path?: undefined;
subPaths: { key: string; path: string; element?: string }[]; subPaths: { key: string; path: string; elementName?: string; element?: JSX.Element }[];
}; };
type NavLink = { type NavLink = {
key: string; key: string;
title: string; title: string;
element: string; elementName: string;
element: JSX.Element;
} & NavLinkPath; } & NavLinkPath;
const navLinks: NavLink[] = [ const navLinks: NavLink[] = [
// { key: "home", path: "/", title: "Home", element: <HomePane /> },
{ {
key: "srs", key: "srs",
title: "SRS", title: "SRS",
element: "SrsPane", elementName: "SrsPane",
element: <SrsPane />,
subPaths: [ subPaths: [
{ key: "index", path: "/" }, { key: "index", path: "/" },
{ key: "review", path: "/srs/review", element: "SrsReviewPane" }, {
key: "review",
path: "/srs/review",
elementName: "SrsReviewPane",
element: <SrsReviewPane />,
},
], ],
}, },
{ {
key: "kanji", key: "kanji",
title: "Kanji", title: "Kanji",
element: "KanjiPane", elementName: "KanjiPane",
element: <KanjiPane />,
subPaths: [ subPaths: [
{ key: "index", path: "/kanji" }, { key: "index", path: "/kanji" },
{ key: "selected", path: "/kanji/:selectedKanji" }, { key: "selected", path: "/kanji/:selectedKanji" },
], ],
}, },
{ key: "vocab", path: "/vocab", title: "Vocab", element: "VocabPane" }, {
{ key: "settings", path: "/settings", title: "Settings", element: "SettingsPane" }, key: "vocab",
path: "/vocab",
title: "Vocab",
elementName: "VocabPane",
element: <VocabPane />,
},
{
key: "settings",
path: "/settings",
title: "Settings",
elementName: "SettingsPane",
element: <SettingsPane />,
},
]; ];