三、使用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 (
    
      
        
        
      
    
  );
};

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 (
    
      
        

           {
              return ;
            }}
          >
            Help
            Settings
            Sign out
          
        

        

          
            
          
        
      
    
  );
};

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

  const handleToggle = () => {
    setExpand(!expand);
  };
  return (
    

      
        
          
            

              
               BRAND
            
          
          
            
              

                }>
                  Dashboard
                
                }>
                  User Group
                
                }
                  placement="rightStart"
                >
                  Geo
                  Devices
                  Brand
                  Loyalty
                  Visit Depth
                
                }
                >
                  Applications
                  Websites
                  Channels
                  Tags
                  Versions
                
              
            
          
          
        

        
          

            
Page Title
          
          Content
        
      
    
  );
};

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