React学习之旅----配置多页面路由及嵌套路由demo

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>
    );
  }
}