boniuApi/boniu/src/components/Navbar/navbar.jsx

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Overview from "../../components/Overview/overview";
import Stocks from "../../components/StocksApi/stocks";
import IndexApi from "../../components/IndexApi/indexApi";
import indexBasicInfo from "../../components/indexBasicInfo/indexBasicInfo";
import { Link } from "react-router-dom";
import stocksApiList from "../../StocksApiList";
import indexApiList from "../../IndexApiList";
import "antd/dist/antd.css";
import "./navbar.css";
import { Layout, Menu } from "antd";
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined
} from "@ant-design/icons";
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
export default class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userInfo: {}
    };
  }
  render() {
    // let { match } = this.props;
    return (
      <Layout style={{ minHeight: "100vh" }}>
        <Header className="header">BoNiu</Header>
        <Layout>
          <Sider width={200} className="site-layout-background">
            <Menu
              mode="inline"
              defaultSelectedKeys={["overview"]}
              defaultOpenKeys={["overview"]}
              style={{ height: "100%", borderRight: 0 }}
            >
              <Menu.Item key="overview" icon={<UserOutlined />}>
                <Link to="/overview">总体说明</Link>
              </Menu.Item>
              <SubMenu
                key="stocks"
                icon={<LaptopOutlined />}
                title="股票接口"
              >
                {stocksApiList.map((item) => {
                  return (
                    <Menu.Item key={item.key}>
                      <Link to={item.url}>{item.name}</Link>
                    </Menu.Item>
                  );
                })}
              </SubMenu>
              <SubMenu
                key="indexApi"
                icon={<NotificationOutlined />}
                title="指数接口"
              >
                {indexApiList.map((item) => {
                  return (
                    <Menu.Item key={item.key}>
                      <Link to={{pathname: item.url, state: item.data}}>{item.name}</Link>
                    </Menu.Item>
                  );
                })}
              </SubMenu>
            </Menu>
          </Sider>
          <Layout style={{ padding: "0 24px 24px" }}>
            <Content
              style={{
                background: "#fff",
                padding: 24,
                margin: 0,
                minHeight: 280
              }}
            >
              <Switch>
                <Route exact path="/" component={Overview} />
                <Route path="/overview" component={Overview} />
                <Route path="/stocks" component={Stocks} />
                <Route path="/indexApi" component={indexBasicInfo} />
              </Switch>
            </Content>
          </Layout>
        </Layout>
      </Layout>
    );
  }
}