staff_data/apps/web/src/routes/index.tsx

import {
	createBrowserRouter,
	IndexRouteObject,
	Link,
	NonIndexRouteObject,
	useParams,
} from "react-router-dom";
import ErrorPage from "../app/error";
import WithAuth from "../components/utils/with-auth";
import LoginPage from "../app/login";
import HomePage from "../app/main/home/page";
import { CourseDetailPage } from "../app/main/course/detail/page";
import { CourseBasicForm } from "../components/models/course/editor/form/CourseBasicForm";
import CourseContentForm from "../components/models/course/editor/form/CourseContentForm/CourseContentForm";
import CourseEditorLayout from "../components/models/course/editor/layout/CourseEditorLayout";
import { MainLayout } from "../app/main/layout/MainLayout";
import CoursesPage from "../app/main/courses/page";
import PathPage from "../app/main/path/page";
import { adminRoute } from "./admin-route";
import PathEditorPage from "../app/main/path/editor/page";

import { CoursePreview } from "../app/main/course/preview/page";
import MyLearningPage from "../app/main/my-learning/page";
import MyDutyPage from "../app/main/my-duty/page";
import MyPathPage from "../app/main/my-path/page";
import SearchPage from "../app/main/search/page";
interface CustomIndexRouteObject extends IndexRouteObject {
	name?: string;
	breadcrumb?: string;
}
interface CustomIndexRouteObject extends IndexRouteObject {
	name?: string;
	breadcrumb?: string;
}

export interface CustomNonIndexRouteObject extends NonIndexRouteObject {
	name?: string;
	children?: CustomRouteObject[];
	breadcrumb?: string;
	handle?: {
		crumb: (data?: any) => void;
	};
}
export type CustomRouteObject =
	| CustomIndexRouteObject
	| CustomNonIndexRouteObject;
export const routes: CustomRouteObject[] = [
	{
		path: "/",
		errorElement: <ErrorPage />,
		handle: {
			crumb() {
				return <Link to={"/"}>主页</Link>;
			},
		},
		children: [
			{
				element: <MainLayout></MainLayout>,
				children: [
					{
						index: true,
						element: <HomePage />,
					},
					{
						path: "path",
						children: [
							{
								index: true,
								element: <PathPage></PathPage>,
							},
							{
								path: "editor/:id?",
								element: <WithAuth>
											<PathEditorPage></PathEditorPage>
										</WithAuth>,
							},
						],
					},
					{
						path: "courses",
						element: <CoursesPage></CoursesPage>,
					},
					{
						path: "my-path",
						element: (
							<WithAuth>
								<MyPathPage></MyPathPage>
							</WithAuth>
						),
					},
					{
						path: "my-duty",
						element: (
							<WithAuth>
								<MyDutyPage></MyDutyPage>
							</WithAuth>
						),
					},
					{
						path: "my-learning",
						element: (
							<WithAuth>
								<MyLearningPage></MyLearningPage>
							</WithAuth>
						),
					},
					{
						path: "search",
						element: <SearchPage></SearchPage>,
					},
					{
						path: "course/:id?/detail/:lectureId?", // 使用 ? 表示 id 参数是可选的
						element: <CourseDetailPage />,
					},
				],
			},

			{
				path: "course",
				children: [
					{
						path: ":id?/editor",
						element: (
							<WithAuth>
								<CourseEditorLayout></CourseEditorLayout>
							</WithAuth>
						),
						children: [
							{
								index: true,
								element: (
									<WithAuth>
										<CourseBasicForm></CourseBasicForm>
									</WithAuth>
								),
							},

							{
								path: "content",
								element: (
									<WithAuth>
										<CourseContentForm></CourseContentForm>
									</WithAuth>
								),
							},
						],
					},
				],
			},
			adminRoute,
		],
	},
	{
		path: "/login",
		breadcrumb: "登录",
		element: <LoginPage></LoginPage>,
	},
];

export const router = createBrowserRouter(routes);