dashboard/src/App.js

import './App.css';
import {
    HomeOutlined,
    TeamOutlined,
    DashboardOutlined,
    FileProtectOutlined,
} from '@ant-design/icons';
import {Layout, Menu, Image} from 'antd';
import {BrowserRouter, Route, Routes, NavLink} from "react-router-dom"
import React from 'react';
import Home from "./views/Home"
import Dashboard from "./views/Dashboard"
import Orders from "./views/Orders"
import Logo from './logo.png'


function App() {
    const {Content, Footer, Sider} = Layout;

    const menu_items = [
        {key: 1, label: <NavLink to="/">主页</NavLink>, icon: <HomeOutlined/>},
        {key: 2, label: <NavLink to="/orders">订单数据</NavLink>, icon: <FileProtectOutlined/>},
        {key: 3, label: <NavLink to="/dashboard">仪表盘</NavLink>, icon: <DashboardOutlined/>},
        {
            key: 4,
            label: '下拉菜单',
            icon: <TeamOutlined/>,
            children: [
                {key: 41, label: <NavLink to="/order">子菜单1</NavLink>},
                {key: 412, label: <NavLink to="/order">子菜单2</NavLink>},
            ]
        },

    ];

    return (
        <BrowserRouter>
            <Layout
                style={{
                    minHeight: '100vh',
                }}
            >
                <Sider collapsible={false} defaultCollapsed={false} breakpoint="lg"
                       collapsedWidth="0">
                    <Image src={Logo} preview={false}/>
                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={menu_items}/>
                </Sider>
                <Layout className="site-layout">
                    <Content>
                        <Routes>
                            <Route path="/" element={<Home/>}/>
                            <Route path="/orders" element={<Orders/>}/>
                            <Route path="/dashboard" element={<Dashboard/>}/>
                        </Routes>
                    </Content>
                    <Footer
                        style={{
                            textAlign: 'center',
                        }}
                    >
                        Hainatravel Dashboard ©2022 Created by IT
                    </Footer>
                </Layout>
            </Layout>
        </BrowserRouter>
    );
}

export default App;