使用Ant Design中Layout布局实现一个简单的react管理后台（一）

一、Home.js中引入Ant Design

具体可查看官网

import { Layout, Menu, Breadcrumb } from 'antd';
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

二、修改菜单

<SubMenu key="sub1" icon={<UserOutlined/>} title="用户管理">
  <Menu.Item key="1">
      <Link to="/userInfo">用户信息</Link>
  </Menu.Item>
  <Menu.Item key="2">
      <Link to="/authority">权限信息</Link>
  </Menu.Item>
</SubMenu>

三、内容区域添加需要的组件

<Content
          className="site-layout-background"
          style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
          }}
      >
          {/*内容区域*/}
          <Route exact path="/userInfo" component={UserInfo} />

</Content>

四、引入路由，并用Router包裹Layout代码块

import { BrowserRouter as Router, Route, NavLink,Link } from "react-router-dom";

五、效果如下

六、完整代码

Router.js

import React from 'react'
import ReactDOM from "react-dom";
import {BrowserRouter as Router,Switch,Redirect, Route} from "react-router-dom";
import Home from '../views/Home.js'
import News from '../views/News.js'
import Course from '../views/Course.js'
import JoinUs from '../views/JoinUs.js'
import A from '../containers/A.js'
import advantage from '../containers/advantage.js'
import App from '../App';
import Login from '../views/account/Login'
import Store from '../components/testStore'
import UserInfo from "../views/user/UserInfo";
const BasicRoute = () => (
     <Router>
        <div>
            <Switch>
                <Route exact path="/" component={Login} />
                <Route path="/Home" component={Home} />
                {/*<Route path="/userInfo" component={UserInfo} />*/}
                <Route path="/news" component={News}/>
                {/*<Route path="/news/:id" component={NewsDetail}/>*/}
                <Route path="/course" component={Course}/>
                <Route path="/joinUs" render={(props) => <JoinUs {...props}/>}/>
                <Route path="/error" render={(props) => <div><h1>404 Not Found!</h1></div>}/>
            </Switch>
        </div>
    </Router>
);
export default BasicRoute ;

Home.js

import React, {Component} from 'react';
import {Breadcrumb, Button, Layout, Menu} from "antd";
import {UserOutlined, LaptopOutlined, NotificationOutlined} from '@ant-design/icons';
import ComHeader from './common/Header'
import UserInfo from './user/UserInfo'
import { BrowserRouter as Router, Route, NavLink,Link } from "react-router-dom";
const {SubMenu} = Menu;
const {Header, Content, Sider} = Layout;
export default class Login extends Component {
 constructor(props) {
     super(props);

     this.state = {
         userInfo: {}
     };
 }

render() {
let { match } = this.props;
return (
<Router>
<div>
<div>
<Layout>
<Header className="header">
    {/*导航栏外部组件*/}
    <ComHeader/>
</Header>
<Layout>
    <Sider width={200} className="site-layout-background">
        <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{height: '100%', borderRight: 0}}
        >
            <SubMenu key="sub1" icon={<UserOutlined/>} title="用户管理">
                <Menu.Item key="1">
                    <Link to="/userInfo">用户信息</Link>
                </Menu.Item>
                <Menu.Item key="2">
                    <Link to="/authority">权限信息</Link>
                </Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<LaptopOutlined/>} title="subnav 2">
                <Menu.Item key="5">option5</Menu.Item>
                <Menu.Item key="6">option6</Menu.Item>
            </SubMenu>
            <SubMenu key="sub3" icon={<NotificationOutlined/>} title="subnav 3">
                <Menu.Item key="9">option9</Menu.Item>
                <Menu.Item key="10">option10</Menu.Item>
            </SubMenu>
        </Menu>
    </Sider>
    <Layout style={{padding: '0 24px 24px'}}>
        {/*面包屑区域*/}
        <Breadcrumb style={{margin: '16px 0'}}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<Content
    className="site-layout-background"
    style={{
        padding: 24,
        margin: 0,
        minHeight: 280,
    }}
>
{/*内容区域*/}
<Route exact path="/userInfo" component={UserInfo} />
</Content>
</Layout>
</Layout>
</Layout>
</div>
</div>
</Router>

)
}

}

上一篇：react路由使用以及封装