使用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="/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>
)
}
}