使用Ant Design中Layout布局实现一个简单的react管理后台（二）

基于上一篇进行下一步封装，主要实现分栏布局和动态路由

基础搭建请看上篇
使用Ant Design中Layout布局实现一个简单的react管理后台（一）

（1）话不多说，开始说上篇存在的问题

**

• 路由太乱，我们都希望能像Vue新建路由一样，简单明了，刚开始是这样的**

//Router.js

const BasicRoute = () => (
  <Router>
     <div>
         <Switch>
          {/*   <Route exact path="/">
                 <Login />
             </Route>*/}
             <Route exact path="/" component={Login} />
             <Route path="/Home" component={Home} />
             <Route path="/news" component={News}/>
             <Route path="/course" component={Course}/>
             <Route path="/joinUs" render={(props) => <JoinUs {...props}/>}/>
             <Route path="/error" render={(props) => <div><h1>404 Not Found!</h1></div>}/>
            {/* <Route path="*" render={(props) => <Redirect to='/error'/>}/>*/}
         </Switch>
     </div>
 </Router>
);

• 主页中嵌套路由，开发中要引入很多组件，不好统一维护

2. 改造，我们希望项目分两部分，外部mainRoutes（登录、注册等路由），和adminRoutes（登录成功后内部路由）

//Router.js

export const mainRoutes = [
    {
        path: '/',
        component: Login,
        exact: true,
    },

   {
        path: '/error',
        component: Error,
        exact: true,
    },
]

export var adminRoutes = [
    {
        path: '/admin/userInfo',
        component: UserInfo,
        title:"用户信息",
        icon:"UserOutlined",
        isShow:true
    },   {
        path: '/admin/authority',
        component:Authority ,
        title:"权限管理",
        isShow:true
    },  {
        path: '/admin/joinUs',
        component: JoinUs,
        exact: true,
        isShow:true
    },
    {
        path: '/admin/advantage',
        component: advantage,
        children: [
            {
                path: '/advantage/advantage1',
                component: A
            }
        ]
    }
]

（2）然后在index中引入

**这里我使用react-router-config插件**，相当于遍历路由啦
当然我们也可以直接遍历
ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>
        <Route path="/admin" render={routeProps => <App {...routeProps} />} />
        {mainRoutes.map(route => {
          return <Route key={route.path} {...route} />;
        })}
        <Redirect to="/admin" from="/" />
        <Redirect to="/404" />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById("root")
);

（3）所有/admin路径转发给App.js, //其他路径直接匹配

import React from 'react';
import ReactDOM from 'react-dom';
import {mainRoutes} from './router/Router.js';
import { renderRoutes } from 'react-router-config';
import App from './App'
import {BrowserRouter as Router,Switch,Redirect, Route} from "react-router-dom";

ReactDOM.render(
    <Router>
        <Switch>
        //所有/admin路径转发给App.js
            <Route path={"/admin"} render = {routeProps=>{
                    return <App { ...routeProps  } />;
                   }}
            />
            //其他路径直接匹配
            {renderRoutes(mainRoutes)}
            <Redirect to="/error"/>
        </Switch>
    </Router>,
    document.getElementById('root')
);

（4）App.js引入adminRoutes

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {Button} from 'antd';
import {BrowserRouter as Router, Switch, Redirect, Link, Route} from "react-router-dom";
import {renderRoutes} from 'react-router-config';
import {adminRoutes} from './router/Router'
import Home from './views/Home'

function App() {
  return (
      <Home>
          <Switch>
              {adminRoutes.map(route => {
                  return (
                      <Route
                          key={route.path}
                          path={route.path}
                          exact={route.exact}
                          render={routeProps => {
                              return <route.component {...routeProps} />;
                          }}
                      />
                  );
              })}
              <Redirect to="/error"/>
          </Switch>
      </Home>

  );
}

export default App;

（5）Home.js中动态菜单

<Menu
   mode="inline"
   defaultSelectedKeys={['1']}
   defaultOpenKeys={['sub1']}
   style={{height: '100%', borderRight: 0}}
>
   {routes.map(route => {
       return (
           <Menu.Item
               key={route.path}
               onClick={p => props.history.push(p.key)}
           >
               <TeamOutlined />
               {route.title}
           </Menu.Item>
       )
   })}
</Menu>

（6）右侧内容区域加{props.children}

<Content
   className="site-layout-background"
   style={{
       padding: 24,
       margin: 0,
       minHeight: 280,
   }}
>
   {props.children}
</Content>

（7）用户组件简单加些布局

import React, {Component} from 'react'
import {Card, Table, Button, Popconfirm, List, Typography, Divider, Tag, Space, Breadcrumb, Layout} from "antd";
/*export default class UserInfo extends Component{
    constructor() {
        super();
    }
    render() {
        return <div>
            <h1>这里是用户组件。。。</h1>
        </div>
    }

 }*/
const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
];

function UserlIist(props) {

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            render: text => <a>{text}</a>,
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record, index) => (
                <div>
                    <Button
                        type="primary"
                        size="small"
                        onClick={() => {
                            // 跳转到edit页面，传递id作为参数
                            props.history.push(`/admin/products/edit/${record._id}`);
                        }}
                    >
                        修改
                    </Button>
                    <Button style={{margin: "0 1rem"}} type="danger" size="small">
                        删除
                    </Button>
                </div>
            ),
        },
    ];

    const data = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            tags: ['nice', 'developer'],
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            tags: ['loser'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
    ];


    return (
        <div>
            {/*面包屑*/}
            <Breadcrumb style={{margin: '16px 0'}}>
                <Breadcrumb.Item>主页</Breadcrumb.Item>
                <Breadcrumb.Item>用户管理</Breadcrumb.Item>
                <Breadcrumb.Item>用户列表</Breadcrumb.Item>
            </Breadcrumb>
            <Card title="用户组件" extra={
                <Button
                    type="primary"
                    size="small"
                    onClick={() => props.history.push("/admin/products/edit")}
                >
                    新增
                </Button>
            }
            >
                {/*表格数据*/}
                <Table columns={columns} dataSource={data}/>
            </Card>

        </div>
    )

}

export default UserlIist

（8）这样，大概就可以了，可以按项目需求使用redux和axios

效果如下图