React 学习笔记(二): React项目框架构建

1️⃣ 创建项目

# 由react官方推荐的react router v7创建项目
npx create-react-router@latest
# 安装eslint插件
npm install --save-dev eslint-config-react-app eslint@^8.0.0
# 安装antd UI库
npm i antd --save
# 安装antd针对react 19的兼容包
npm install @ant-design/v5-patch-for-react-19 --save 
# 安装tailwind插件
npm i tailwind-scrollbar-hide
# 运行项目
npm run dev

2️⃣ 页面框架搭建

目录构建

├── Dockerfile
├── README.md
├── app
│   ├── app.css
│   ├── assets
│   │   ├── menu-logo-slim.svg
│   │   └── menu-logo.svg
│   ├── components
│   ├── layouts
│   │   ├── scripts
│   │   │   └── menus.tsx
│   │   └── vertical-dashboard.tsx
│   ├── pages
│   ├── root.tsx
│   ├── routes
│   │   ├── dashboard.tsx
│   │   └── home.tsx
│   ├── routes.ts
│   └── welcome
│       ├── logo-dark.svg
│       ├── logo-light.svg
│       └── welcome.tsx
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── react-router.config.ts
├── tsconfig.json
└── vite.config.ts

基本配置

// react-router.config.ts
import type { Config } from "@react-router/dev/config";

export default {
  // Config options...
  // Server-side render by default, to enable SPA mode set this to `false`
  ssr: false,
} satisfies Config;

// .prettierrc
{
    "tabWidth": 4,
    "useTabs": true
}

路由配置

// app/routes.ts
import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
    // 对应文件不能用具名导出
    route("/", "routes/dashboard.tsx", [
        index("routes/home.tsx"),
        route("dashboard", "welcome/welcome.tsx"),
        route("user", "welcome/welcome.tsx")
    ]),
] satisfies RouteConfig;

Layout配置

// ------app/root.tsx添加：------
import "@ant-design/v5-patch-for-react-19";

// ------app/layouts/vertical-dashboard.tsx------
import React, { useMemo, useState } from "react";
import {
	VerticalRightOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Breadcrumb, Layout, Menu, theme, Tooltip } from "antd";
import menuLogo from "~/assets/menu-logo.svg";
import menuLogoSlim from "~/assets/menu-logo-slim.svg";
import { Outlet, useLocation, useNavigate } from "react-router";
import { items } from "./scripts/menus";
const { Header, Content, Footer, Sider } = Layout;


export const VerticalDashboardLayout: React.FC = () => {
	const [collapsed, setCollapsed] = useState(false);
	const {
		token: { colorBgContainer, borderRadiusLG },
	} = theme.useToken();
	const location = useLocation();

	const selectedMenuItems: string[] = useMemo(() => {
		return [location.pathname];
	}, [location.pathname]);
	const navigate = useNavigate();

	const handleMenuClick: MenuProps["onClick"] = ({ key }) => {
		navigate(key);
	};

	return (
		<Layout className="h-screen">
			<Sider
				trigger={null}
				collapsible
				width={250}
				collapsed={collapsed}
				className="h-screen overflow-y-auto scrollbar-hide"
			>
				<div className="demo-logo-vertical relative pb-1 pt-1">
					<div
						className={`absolute top-0.5 right-0.5 text-[#e8e8e8] cursor-pointer ${collapsed && "hidden"}`}
					>
						<VerticalRightOutlined
							onClick={() => setCollapsed(true)}
						/>
					</div>
					<img
						src={menuLogo}
						alt="React Router"
						className={`block w-full ${collapsed && "hidden"}`}
					/>
					<Tooltip title="Expand Menu">
						<img
							src={menuLogoSlim}
							alt="React Router"
							className={`block w-full ${collapsed || "hidden"} cursor-pointer`}
							onClick={() => setCollapsed(false)}
						/>
					</Tooltip>
				</div>
				<Menu
					theme="dark"
					selectedKeys={selectedMenuItems}
					defaultSelectedKeys={["/dashboard"]}
					mode="inline"
					items={items}
					onClick={handleMenuClick}
				/>
			</Sider>
			<Layout className="h-screen overflow-auto">
				<Header style={{ padding: 0, background: colorBgContainer }} />
				<Content style={{ margin: "0 16px", paddingTop: "16px" }}>
					<div
						style={{
							padding: 24,
							minHeight: 360,
							background: colorBgContainer,
							borderRadius: borderRadiusLG,
						}}
					>
						<Outlet />
					</div>
				</Content>
				<Footer style={{ textAlign: "center" }}>
					Copyright ©{new Date().getFullYear()} Created by OpenGMS
				</Footer>
			</Layout>
		</Layout>
	);
};

// ------app/layouts/scripts/menus.tsx------
import {
	SettingOutlined,
	TeamOutlined,
	AuditOutlined,
	UserOutlined,
	DatabaseOutlined,
	ConsoleSqlOutlined,
	ControlOutlined,
	FileProtectOutlined,
	GlobalOutlined,
	BlockOutlined,
	ClearOutlined,
	ProductOutlined,
	DashboardOutlined,
	VerticalRightOutlined,
	InboxOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
type MenuItem = Required<MenuProps>["items"][number];

// 具名导出
export const items: MenuItem[] = [
	{
		key: "/dashboard", // 如果不加/就会按相对路径解析
		label: "工作台",
		icon: <DashboardOutlined />,
	},
	{
		key: "1",
		label: "用户",
		type: "group",
		children: [
			{
				key: "/user",
				label: "用户管理",
				icon: <UserOutlined />,
			},
			{
				key: "/role",
				label: "角色管理",
				icon: <TeamOutlined />,
			},
			{
				key: "/permission",
				label: "权限配置",
				icon: <AuditOutlined />,
			},
		],
	},
	{
		key: "2",
		label: "数据",
		type: "group",
		children: [
			{
				key: "/sensor",
				label: "传感器信息管理",
				icon: <GlobalOutlined />,
			},
			{
				key: "/product",
				label: "产品信息管理",
				icon: <InboxOutlined />,
			},
			{
				key: "/satellite",
				label: "遥感数据管理",
				icon: <DatabaseOutlined />,
			},
			{
				key: "/vector",
				label: "矢量数据管理",
				icon: <BlockOutlined />,
			},
			{
				key: "/theme",
				label: "栅格产品管理",
				icon: <ProductOutlined />,
			},
		],
	},
	{
		key: "3",
		label: "运维",
		type: "group",
		children: [
			{
				key: "/cache",
				label: "缓存管理",
				icon: <ClearOutlined />,
			},
			{
				key: "/sql",
				label: "SQL监控",
				icon: <ConsoleSqlOutlined />,
			},
			{
				key: "/audit",
				label: "日志审查",
				icon: <FileProtectOutlined />,
			},
			{
				key: "/task",
				label: "任务管理",
				icon: <ControlOutlined />,
			},
		],
	},
	{
		key: "4",
		label: "配置",
		type: "group",
		children: [
			{
				key: "/config",
				label: "系统参数",
				icon: <SettingOutlined />,
			},
		],
	},
];

// ------ app/routes/dashboard.tsx ------
// 命名导入
import type { Route } from "./+types/dashboard";
import { VerticalDashboardLayout } from "../layouts/vertical-dashboard"

export function meta({}: Route.MetaArgs) {
    return [
      { title: "ARD后台管理系统" },
      { name: "description", content: "Welcome to React Router!" },
    ];
  }

export default function Dashboard() {
    return (
        <>
            <VerticalDashboardLayout />
        </>
    );
}

// ------app/routes/home.tsx------
/**
 * Redirect to Dashboard
 */
import type { Route } from "./+types/home";
import { useEffect } from "react";
import { useNavigate } from "react-router";

export function meta({}: Route.MetaArgs) {
	return [
		{ title: "New React Router App" },
		{ name: "description", content: "Welcome to React Router!" },
	];
}

export default function Home() {
  const navigate = useNavigate();
	useEffect(() => {
    navigate("/dashboard")
  });
	return null;
}

3️⃣ 运行

npm run dev -- --host