react搭配Ant Design界面模板及路由配置

接上篇文章配置出react用蚂蚁金服的环境
配置成功后：

1. 安装路由的包：
   cnpm i react-router-dom
   使用历史记录模式

引用方式入口文件修改如下：

import {BrowserRouter as Router} from 'react-router-dom'

<Router>
<App />
</Router>, document.getElementById('root'));

配置成功后运行检查是否出错

2. 配置withRouter
   App.js引入子组件Todo,他的配置方式如下

import {Route,NavLink,Redirect,Switch,withRouter} from 'react-router-dom'

修改导出：

export default withRouter(Todo)

配置成功后 在页面打印this.props会出现如图

则配置成功，withRouter作用可以监听路由变化

3. 引入Ant Design 布局
   我引用的是官网：
   https://ant.design/components/layout-cn/#components-layout-demo-basic
   顶部-侧边布局-通栏布局：
   官网给的代码为：

import { Layout, Menu, Breadcrumb, Icon } from 'antd';

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

ReactDOM.render(
  <Layout>
    <Header className="header">
      <div className="logo" />
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={['2']}
        style={{ lineHeight: '64px' }}
      >
        <Menu.Item key="1">nav 1</Menu.Item>
        <Menu.Item key="2">nav 2</Menu.Item>
        <Menu.Item key="3">nav 3</Menu.Item>
      </Menu>
    </Header>
    <Layout>
      <Sider width={200} style={{ background: '#fff' }}>
        <Menu
          mode="inline"
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          style={{ height: '100%', borderRight: 0 }}
        >
          <SubMenu
            key="sub1"
            title={
              <span>
                <Icon type="user" />
                subnav 1
              </span>
            }
          >
            <Menu.Item key="1">option1</Menu.Item>
            <Menu.Item key="2">option2</Menu.Item>
            <Menu.Item key="3">option3</Menu.Item>
            <Menu.Item key="4">option4</Menu.Item>
          </SubMenu>
          <SubMenu
            key="sub2"
            title={
              <span>
                <Icon type="laptop" />
                subnav 2
              </span>
            }
          >
            <Menu.Item key="5">option5</Menu.Item>
            <Menu.Item key="6">option6</Menu.Item>
            <Menu.Item key="7">option7</Menu.Item>
            <Menu.Item key="8">option8</Menu.Item>
          </SubMenu>
          <SubMenu
            key="sub3"
            title={
              <span>
                <Icon type="notification" />
                subnav 3
              </span>
            }
          >
            <Menu.Item key="9">option9</Menu.Item>
            <Menu.Item key="10">option10</Menu.Item>
            <Menu.Item key="11">option11</Menu.Item>
            <Menu.Item key="12">option12</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
          style={{
            background: '#fff',
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
          Content
        </Content>
      </Layout>
    </Layout>
  </Layout>,
  mountNode,
);

把对应模块引入Todo组件中 新建三个组件分别为Home,List,Myself，同理为了方便 对应的路由分别为"/home","/list","/myself",

4. 详细思路该模板给的是三级路由，为了方便演示，我改成了2级路由，也就是12个页面，方便结果只写了三个页面，界面结果如下：
   
   如图：创建数据

 		list:[{
                id:"sub1",
                path:"home",
                type:"user",
                key:[{
                    id:1,
                    path:"h1",
                    name:"目录1"
                },{
                    id:2,
                    path:"h2",
                    name:"目录2"
                },{
                    id:3,
                    path:"h3",
                    name:"目录3"
                },{
                    id:4,
                    path:"h4",
                    name:"目录4"
                }]
              },
              {
                id:"sub2",
                path:"list",
                type:"laptop",
                key:[{
                    id:5,
                    path:"h5",
                    name:"目录5"
                },{
                    id:6,
                    path:"h6",
                    name:"目录6"
                },{
                    id:7,
                    path:"h7",
                    name:"目录7"
                },{
                    id:8,
                    path:"h8",
                    name:"目录8"
                }]
              },
              {
                id:"sub3",
                path:"myself",
                type:"notification",
                key:[{
                    id:9,
                    path:"h9",
                    name:"目录9"
                },{
                    id:10,
                    path:"h10",
                    name:"目录10"
                },{
                    id:11,
                    path:"h11",
                    name:"目录11"
                },{
                    id:12,
                    path:"h12",
                    name:"目录12"
                }]
              }],

为路由名称以及id:
把官网重复的删除，我们进行map遍历：
todo.js代码如下

import React, { Component } from 'react'
import Home from '../home';
import List from '../list';
import Myself from '../Meself';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import {Route,NavLink,Redirect,Switch,withRouter} from 'react-router-dom'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
class Todo extends Component {
    constructor(props){
        super(props)
        this.state={
            list:[{
                id:"sub1",
                path:"home",
                type:"user",
                key:[{
                    id:1,
                    path:"h1",
                    name:"目录1"
                },{
                    id:2,
                    path:"h2",
                    name:"目录2"
                },{
                    id:3,
                    path:"h3",
                    name:"目录3"
                },{
                    id:4,
                    path:"h4",
                    name:"目录4"
                }]
              },
              {
                id:"sub2",
                path:"list",
                type:"laptop",
                key:[{
                    id:5,
                    path:"h5",
                    name:"目录5"
                },{
                    id:6,
                    path:"h6",
                    name:"目录6"
                },{
                    id:7,
                    path:"h7",
                    name:"目录7"
                },{
                    id:8,
                    path:"h8",
                    name:"目录8"
                }]
              },
              {
                id:"sub3",
                path:"myself",
                type:"notification",
                key:[{
                    id:9,
                    path:"h9",
                    name:"目录9"
                },{
                    id:10,
                    path:"h10",
                    name:"目录10"
                },{
                    id:11,
                    path:"h11",
                    name:"目录11"
                },{
                    id:12,
                    path:"h12",
                    name:"目录12"
                }]
              }],
              sub:"sub1",
              keys:"1"
        }
    }
    change(sub,id){
        console.log(sub,id)
        this.setState({
            sub:sub,
            keys:id
        })
    }
    render() {
        return (
            <div>
                  <Layout>
                    <Header className="header">
                    <div className="logo" />
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['1']}
                        style={{ lineHeight: '64px' }}
                    >
                        <Menu.Item key="1">工作系统</Menu.Item>
                    </Menu>
                    </Header>
                    <Layout>
                    <Sider width={200} style={{ background: '#fff' }}>
                        <Menu
                        mode="inline"
                        defaultSelectedKeys={[this.state.keys]}
                        defaultOpenKeys={[this.state.sub]}
                        style={{ height: '100%', borderRight: 0 }}
                        >
                        {
                            this.state.list.map((item)=>{
                            return <SubMenu
                                    key={item.id}
                                    title={
                                        <NavLink to={"/"+item.path+"/"+item.key[0].path}>
                                        <span style={{display:"block"}}>
                                        <Icon type="user" />
                                        {item.path}
                                        </span>
                                        </NavLink>
                                    }
                                    >
                                        {
                                            item.key.map((it)=>{
                                                return <Menu.Item key={it.id} onClick={this.change.bind(this,item.id,it.id)}><NavLink to={"/"+item.path+"/"+it.path}>{it.name}</NavLink></Menu.Item>
                                            })
                                        }
                                    </SubMenu>
                            })
                        }
                        </Menu>
                    </Sider>
                    <Layout style={{ padding: '0 24px 24px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>{this.props.location.pathname.split("/")[1]}</Breadcrumb.Item>
                        <Breadcrumb.Item>{this.props.location.pathname.split("/")[2]}</Breadcrumb.Item>
                        </Breadcrumb>
                        <Content
                        style={{
                            background: '#fff',
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                        }}
                        >
                        <Switch>
                            <Route path="/home" component={Home}/>
                            <Route path="/list"  component={List}/>
                            <Route path="/myself"  component={Myself}/>
                            <Redirect from="/home" to="/home/h1"/>
                            <Redirect from="/list" to="/list/h1"/>
                            <Redirect from="/myself" to="/myself/h1"/>
                            <Redirect from="/" to="/home/h1" exact/>
                        </Switch>
                        </Content>
                    </Layout>
                    </Layout>
                </Layout>,
            </div>
        )
    }
}
export default withRouter(Todo)

解释如下：


运行结果：