const menuList = [
{
title: '首页',
// key: '/home'
key: '/admin/home'
},
{
title: 'UI',
key: '/ui',
children: [
{
title: '按钮',
// key: '/ui/buttons',
key: '/admin/ui/buttons',
},
{
title: '弹框',
key: '/ui/modals',
},
{
title: 'Loading',
key: '/ui/loadings',
},
{
title: '通知提醒',
key: '/ui/notification',
},
{
title: '全局Message',
key: '/ui/messages',
},
{
title: 'Tab页签',
key: '/ui/tabs',
},
{
title: '图片画廊',
key: '/ui/gallery',
},
{
title: '轮播图',
key: '/ui/carousel',
}
]
},
{
title: '表单',
key: '/form',
children: [
{
title: '登录',
key: '/form/login',
},
{
title: '注册',
key: '/form/reg',
}
]
},
{
title: '表格',
key: '/table',
children: [
{
title: '基础表格',
key: '/table/basic',
},
{
title: '高级表格',
key: '/table/high',
}
]
},
{
title: '富文本',
key: '/rich'
},
{
title: '城市管理',
key: '/city'
},
{
title: '订单管理',
key: '/order',
btnList: [
{
title: '订单详情',
key: 'detail'
},
{
title: '结束订单',
key: 'finish'
}
]
},
{
title: '员工管理',
key: '/user'
},
{
title: '车辆地图',
key: '/bikeMap'
},
{
title: '图标',
key: '/charts',
children: [
{
title: '柱形图',
key: '/charts/bar'
},
{
title: '饼图',
key: '/charts/pie'
},
{
title: '折线图',
key: '/charts/line'
},
]
},
{
title: '权限设置',
key: '/permission'
},
];
export default menuList;
import React from 'react'
import { Row, Col } from 'antd';
import Header from './components/Header'
import Footer from './components/Footer'
import NavLeft from './components/NavLeft'
// import Home from './components/Home'
import './style/common.less'
class Admin extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
render () {
return (
<Row className='container'>
<Col span='4' className='nav-left'><NavLeft /></Col>
<Col span='20' className='main'>
<Header></Header>
<Row className='content'>
{/* <Home></Home> */}
{/* 加载动态组件 */}
{this.props.children}
</Row>
<Footer></Footer>
</Col>
</Row>
)
}
}
export default Admin;
import React from 'react'
import { Menu } from 'antd';
import { NavLink } from 'react-router-dom'
import './index.less'
import MenuConfig from '../../config/menuConfig'
// 注意MenuConfig的位置
const SubMenu = Menu.SubMenu;
class NavLeft extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
componentWillMount () {
const menuTreeNode = this.renderMenu(MenuConfig);
this.setState({
menuTreeNode
})
}
// 菜单渲染
renderMenu = (data) => {
return data.map((item) => {
// console.log(item)
if (item.children) {
return (
<SubMenu title={item.title} key={item.key}>
{this.renderMenu(item.children)}
</SubMenu>
)
}
return <Menu.Item title={item.title} key={item.key}>
{/* {item.title} */}
<NavLink to={item.key}>{item.title}</NavLink>
</Menu.Item>
})
}
render () {
// var style = {
// backgroundColor: 'red'
// }
return (
// <div style={style}>NavLeft</div>
<div>
<div className="logo">
<img src="/assets/logo-ant.svg" alt="" />
<h1>React CMS</h1>
</div>
<Menu theme='dark'>
{/* <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu> */}
{this.state.menuTreeNode}
</Menu>
</div>
)
}
}
export default NavLeft
import React from 'react'
import { HashRouter, Route, Switch } from 'react-router-dom'
import App from './App'
import Login from './pages/login'
import Admin from './Admin'
import Buttons from './pages/ui/button'
import NoMatch from './pages/nomatch'
export default class IRouter extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
render () {
return (
<HashRouter>
<App>
<Route path="/login" component={Login} />
{/* 非常奇怪,写成这种<Route path="/admin" component={Admin} ></Route>形式,不报错,但是页面啥也渲染不出来 */}
{/* 一定要写成上面那种格式 */}
{/* <Route path="/admin" component={Admin} render={()=>{}}/>写成这种,是返回一个空对象,不对的,不需要大括号 */}
<Route path="/admin" render={() =>
// <Admin>
// <Route path='/admin/ui/buttons' component={Buttons} />
// <Route component={NoMatch} />
// </Admin>
<Admin>
<Route path="/admin/ui/buttons" component={Buttons} />
<Route component={NoMatch} />
</Admin>
} />
<Route path='/order/detail' component={Login} />
<Switch></Switch>
</App>
</HashRouter>
)
}
}
import React, { Component } from 'react';
// import logo from './logo.svg';
// import Life from './pages/demo/Life'
// import Admin from './Admin'
import './App.css';
class App extends Component {
render () {
return (
<div className="App">
{/* <header className="App-header">
<img src={logo} className="App-logo" alt="logo" width="100px" />
</header> */}
{/* <Life></Life> */}
{/* <Admin></Admin> */}
{this.props.children}
</div>
);
}
}
export default App;
import React from 'react'
export default class Login extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
render () {
return (
<div>
this is login page.
</div>
)
}
}
import React from 'react'
export default class NoMatch extends React.Component {
render () {
return (
<div style={{ textAlign: 'center', fontSize: '24' }}>
404 No Found
</div>
);
}
}
import React from 'react'
export default class NoMatch extends React.Component {
render () {
return (
<div style={{ textAlign: 'center', fontSize: '24' }}>
404 No Found
</div>
);
}
}