dashboard/src/App.js

import './App.css';
import React, {Component} from 'react';
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 Home from "./views/Home"
import Dashboard from "./views/Dashboard"
import Orders from "./views/Orders"
import Orders_sub from "./views/Orders_sub"
import Orders_index from "./charts/Orders"
import Logo from './logo.png'


class App extends Component {

    constructor(props) {
        super(props);
        this.stores = this.props.stores;
    }


    render() {
        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: 412, label: <NavLink to="/order">损益表</NavLink>},
                    {key: 41, label: <NavLink to="/order">信用卡账单</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 style={{
                            padding: 16,
                            minHeight: 480,
                        }}>
                            <Routes>
                                <Route path="/" element={<Home/>}/>
                                <Route path="/orders" element={<Orders/>}/>
                                <Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title" element={<Orders_sub/>}/>
                                <Route path="/dashboard" element={<Dashboard/>}/>
                            </Routes>
                        </Content>
                        <Footer
                            style={{
                                textAlign: 'center',
                            }}
                        >
                            Hainatravel Dashboard ©2022 Created by IT
                        </Footer>
                    </Layout>
                </Layout>
            </BrowserRouter>
        );
    }
}

export default App;