React學習之旅----配置多頁面路由及巢狀路由demo
阿新 • • 發佈:2018-11-02
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>
);
}
}