LazyRoute完全に理解した

frost-community · Jul 22, 2024 · 2229b7c · 2229b7c
1 parent f8bb05a
commit 2229b7c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 36 deletions.
diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
@@ -24,7 +24,7 @@ const LoginRouteRoute = LoginRouteImport.update({
 const RouteRoute = RouteImport.update({
   path: '/',
   getParentRoute: () => rootRoute,
-} as any)
+} as any).lazy(() => import('./routes/route.lazy').then((d) => d.Route))
 
 // Populate the FileRoutesByPath interface
 

diff --git a/frontend/src/routes/login/route.lazy.tsx b/frontend/src/routes/login/route.lazy.tsx
@@ -1,7 +1,17 @@
-import { createLazyFileRoute } from "@tanstack/react-router";
-
-import { Login } from "./route";
+import { Button } from "@mantine/core";
+import { createLazyFileRoute, Link } from "@tanstack/react-router";
 
 export const Route = createLazyFileRoute("/login")({
   component: Login,
 });
+
+export function Login() {
+  return (
+    <>
+      <p>Login Page</p>
+      <Link to="/">
+        <Button>Top</Button>
+      </Link>
+    </>
+  );
+}
diff --git a/frontend/src/routes/login/route.tsx b/frontend/src/routes/login/route.tsx
@@ -1,10 +1,8 @@
-import { Button } from "@mantine/core";
-import { Link, createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 
 import { BACKEND_EJS_VARIABLE_KEYS } from "@/staticDataRouteOption";
 
 export const Route = createFileRoute("/login")({
-  component: Login,
   staticData: {
     openGraph: {
       title: `<%= ${BACKEND_EJS_VARIABLE_KEYS.siteName} + ' | Login' %>`,
@@ -13,14 +11,3 @@ export const Route = createFileRoute("/login")({
     },
   },
 });
-
-export function Login() {
-  return (
-    <>
-      <p>Login Page</p>
-      <Link to="/">
-        <Button>Top</Button>
-      </Link>
-    </>
-  );
-}
diff --git a/frontend/src/routes/route.lazy.tsx b/frontend/src/routes/route.lazy.tsx
@@ -0,0 +1,21 @@
+import { Button, Group } from "@mantine/core";
+import { createLazyFileRoute, Link } from "@tanstack/react-router";
+
+import { DeleteParrot } from "./-components/DeleteParrot";
+
+export const Route = createLazyFileRoute("/")({
+  component: Home,
+});
+
+function Home() {
+  return (
+    <>
+      <DeleteParrot />
+      <Group justify="center" mt="lg">
+        <Button component={Link} to="/login">
+          LOGIN
+        </Button>
+      </Group>
+    </>
+  );
+}
diff --git a/frontend/src/routes/route.tsx b/frontend/src/routes/route.tsx
@@ -1,12 +1,8 @@
-import { Button, Group } from "@mantine/core";
-import { Link, createFileRoute } from "@tanstack/react-router";
-
-import { DeleteParrot } from "./-components/DeleteParrot";
+import { createFileRoute } from "@tanstack/react-router";
 
 import { BACKEND_EJS_VARIABLE_KEYS } from "@/staticDataRouteOption";
 
 export const Route = createFileRoute("/")({
-  component: Home,
   staticData: {
     openGraph: {
       title: `<%= ${BACKEND_EJS_VARIABLE_KEYS.siteName} %>`,
@@ -15,16 +11,3 @@ export const Route = createFileRoute("/")({
     },
   },
 });
-
-function Home() {
-  return (
-    <>
-      <DeleteParrot />
-      <Group justify="center" mt="lg">
-        <Button component={Link} to="/login">
-          LOGIN
-        </Button>
-      </Group>
-    </>
-  );
-}