三、使用rsuite ui框架

1 、安装rsuite

npm i rsuite --save

注：rsuite文档官网

2、项目引入rsuite样式

在src/App.tsx文件中引入

import 'rsuite/dist/styles/rsuite-default.css';

3、修改src/App.tsx文件

将/路径指向layout文件

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
import {
  Login
} from './pages';
import Layout from './layout';
import 'rsuite/dist/styles/rsuite-default.css';
import "./App.css";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/login" component={Login} />
        <Route path="/" component={Layout} />
      </Switch>
    </Router>
  );
};

export default App;

4、使用rsuite中的左侧导航布局

新建src/layout/index.tsx文件
(由于采用了hook对rsuite的代码进行了细微调整)整体代码如下：

import React, { useState } from "react";
import { Container, Header, Content, Nav, Navbar, Dropdown, Icon, Sidebar, Sidenav } from 'rsuite';
import 'rsuite/lib/styles/index.less'; 
import "./style.css";

const headerStyles: any = {
  padding: 18,
  fontSize: 16,
  height: 56,
  background: "#34c3ff",
  color: " #fff",
  whiteSpace: "nowrap",
  overflow: "hidden"
};

const iconStyles: any = {
  width: 56,
  height: 56,
  lineHeight: "56px",
  textAlign: "center"
};

const NavToggle = ({ expand, onChange }: any) => {
  return (
    <Navbar appearance="subtle" className="nav-toggle">
      <Navbar.Body>
        <Nav>
          <Dropdown
            placement="topStart"
            trigger="click"
            renderTitle={children => {
              return <Icon style={iconStyles} icon="cog" />;
            }}
          >
            <Dropdown.Item>Help</Dropdown.Item>
            <Dropdown.Item>Settings</Dropdown.Item>
            <Dropdown.Item>Sign out</Dropdown.Item>
          </Dropdown>
        </Nav>

        <Nav pullRight>
          <Nav.Item
            onClick={onChange}
            style={{ width: 56, textAlign: "center" }}
          >
            <Icon icon={expand ? "angle-left" : "angle-right"} />
          </Nav.Item>
        </Nav>
      </Navbar.Body>
    </Navbar>
  );
};

const Home = () => {
  const [expand, setExpand] = useState<boolean>(true);

  const handleToggle = () => {
    setExpand(!expand);
  };
  return (
    <div className="show-fake-browser sidebar-page">
      <Container>
        <Sidebar
          style={{ display: "flex", flexDirection: "column" }}
          width={expand ? 260 : 56}
          collapsible
        >
          <Sidenav.Header>
            <div style={headerStyles}>
              <Icon
                icon="logo-analytics"
                size="lg"
                style={{ verticalAlign: 0 }}
              />
              <span style={{ marginLeft: 12 }}> BRAND</span>
            </div>
          </Sidenav.Header>
          <Sidenav
            expanded={expand}
            defaultOpenKeys={["3"]}
            appearance="subtle"
          >
            <Sidenav.Body>
              <Nav>
                <Nav.Item eventKey="1" active icon={<Icon icon="dashboard" />}>
                  Dashboard
                </Nav.Item>
                <Nav.Item eventKey="2" icon={<Icon icon="group" />}>
                  User Group
                </Nav.Item>
                <Dropdown
                  eventKey="3"
                  trigger="hover"
                  title="Advanced"
                  icon={<Icon icon="magic" />}
                  placement="rightStart"
                >
                  <Dropdown.Item eventKey="3-1">Geo</Dropdown.Item>
                  <Dropdown.Item eventKey="3-2">Devices</Dropdown.Item>
                  <Dropdown.Item eventKey="3-3">Brand</Dropdown.Item>
                  <Dropdown.Item eventKey="3-4">Loyalty</Dropdown.Item>
                  <Dropdown.Item eventKey="3-5">Visit Depth</Dropdown.Item>
                </Dropdown>
                <Dropdown
                  eventKey="4"
                  trigger="hover"
                  title="Settings"
                  placement="rightStart"
                  icon={<Icon icon="gear-circle" />}
                >
                  <Dropdown.Item eventKey="4-1">Applications</Dropdown.Item>
                  <Dropdown.Item eventKey="4-2">Websites</Dropdown.Item>
                  <Dropdown.Item eventKey="4-3">Channels</Dropdown.Item>
                  <Dropdown.Item eventKey="4-4">Tags</Dropdown.Item>
                  <Dropdown.Item eventKey="4-5">Versions</Dropdown.Item>
                </Dropdown>
              </Nav>
            </Sidenav.Body>
          </Sidenav>
          <NavToggle expand={expand} onChange={handleToggle} />
        </Sidebar>

        <Container>
          <Header>
            <h2>Page Title</h2>
          </Header>
          <Content>Content</Content>
        </Container>
      </Container>
    </div>
  );
};

export default Home;

样式style.less文件（采用less自动生成css,vscode编辑器插件）

@divider-border-color: 1px solid #e5e5ea;
@show-fake-browser-bg: #f7f7fa;
@default-box-shadow: 4px 4px rgba(0,0,0,.12), 0 0 10px rgba(0,0,0,.06);
@show-fake-browser-content-bg: #fff;

.show-fake-browser {
 border: 1px solid @divider-border-color;
 box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
 border-radius: 4px;
 background: @show-fake-browser-bg;

 &.sidebar-page {
   .rs-sidebar {
     height: calc(100vh);
     box-shadow: @default-box-shadow;
   }

   .rs-sidenav {
     flex: 1 1 auto;
     width: 100%;

     &-collapse-in {
       overflow-y: auto;
     }
   }

   .rs-header {
     padding: 0 20px;
   }

   .rs-content {
     padding: 20px;
     margin: 20px;
     background: @show-fake-browser-content-bg;
   }

   .nav-toggle {
     border-top: @divider-border-color;
   }
 }
}

效果如下图

image.png