feat: 准备 GitHub 模板仓库

src/pages/About/About.tsx

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import { Button } from "@/components/common";
 
-export function About() {
+export default function About() {
 	return (
 		<div className="text-center">
 			<h1 className="mb-4 text-4xl font-bold">关于我们</h1>

src/pages/Home/Home.tsx

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import { Button } from "@/components/common";
 
-export function Home() {
+export default function Home() {
 	return (
 		<div className="text-center">
 			<h1 className="mb-4 text-4xl font-bold">首页</h1>

src/router/index.tsx

@@ -1,6 +1,6 @@
 import { createHashRouter } from "react-router-dom";
 import App from "../App.tsx";
-import { About, Home } from "../pages";
+import { lazyRoute } from "../utils";
 
 export const router = createHashRouter([
 	{
@@ -9,11 +9,11 @@ export const router = createHashRouter([
 		children: [
 			{
 				index: true,
-				element: <Home />,
+				lazy: lazyRoute(() => import("../pages/Home/Home")),
 			},
 			{
 				path: "about",
-				element: <About />,
+				lazy: lazyRoute(() => import("../pages/About/About")),
 			},
 		],
 	},

src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from "./assets";
+export * from "./lazyRoute";
 export * from "./tailwind";

src/utils/lazyRoute.ts

@@ -0,0 +1,8 @@
+import type { ComponentType } from "react";
+
+export function lazyRoute(loader: () => Promise<{ default: ComponentType }>) {
+	return async () => {
+		const module = await loader();
+		return { Component: module.default };
+	};
+}