路由

参考：

• Routing | Guides | React | Hilla Docs
• 功能概览 | React Router6 中文文档
• <Suspense> - React 中文文档
• lazy - React 中文文档

import {AppLayout} from '@hilla/react-components/AppLayout.js';
import {DrawerToggle} from '@hilla/react-components/DrawerToggle.js';
import {Suspense} from 'react';
import {NavLink, Outlet} from 'react-router-dom';
import HomeView from "Frontend/views/home/HomeView";
import '@vaadin/icons';

const navLinkClasses = ({isActive}: any) => {
    return `block rounded-m p-s ${isActive ? 'bg-primary-10 text-primary' : 'text-body'}`;
};

export default function MainLayout() {
    return (
        <AppLayout>
            <DrawerToggle slot="navbar" aria-label="Menu toggle"></DrawerToggle>

            <div slot="drawer" className="flex flex-col justify-between h-full p-m">
                <header className="flex flex-col gap-m">
                    <h1 className="text-l m-0">个人设置</h1>
                    <nav>
                        <NavLink className={navLinkClasses} to="/">首页</NavLink>
                        <NavLink className={navLinkClasses} to="/about">关于</NavLink>
                    </nav>
                    <h1 className="text-l m-0">管理</h1>
                    <nav>
                        <NavLink className={navLinkClasses} to="/admin/user">用户管理</NavLink>
                    </nav>
                </header>
            </div>

            <h2 slot="navbar" className="text-l m-0">YueZoneYggdrasil</h2>

            <Suspense fallback={<HomeView/>}>
                <Outlet/>
            </Suspense>
        </AppLayout>
    );
}

frontend/routes.tsx

import MainLayout from "Frontend/views/MainLayout";
import {createBrowserRouter, RouteObject} from "react-router-dom";
import {lazy} from "react";
import {protectRoutes} from "@hilla/react-auth";
import HomeView from "Frontend/views/home/HomeView";
import SignUpView from "Frontend/views/SignUpView";
import SignInView from "Frontend/views/SignInView";

const AboutView = lazy(async () => import('Frontend/views/about/AboutView.js'));
const UserAdminView = lazy(async () => import('Frontend/views/admin/UserAdminView.js'))

export const routes = protectRoutes([
    {
        element: <MainLayout/>,
        handle: {title: 'Main'},
        children: [
            {path: '/', element: <HomeView/>, handle: {title: '首页',  requiresLogin: true }},
            {path: '/about', element: <AboutView/>, handle: {title: '关于', requiresLogin: true}},
            {path: '/admin/user', element: <UserAdminView />, handle: {title: '用户管理'}},
        ],
    },
    {path: '/signUp', element: <SignUpView />, handle: {title: '注册'}},
    {path: '/signIn', element: <SignInView />, handle: {title: '登入'}},
]) as RouteObject[];

export default createBrowserRouter(routes);