ReactAntdDesign的简单使⽤（Layout布局）及⼀⼆级路由框架的搭建React antd的使⽤⼀⼆级路由框架的搭建
1. 创建⼀个项⽬ 完成antd的引⼊
2. 安装下载react-router-dom
npm install react-router-dom (yarn add react-router-dom)
3. 在src下新建⼏个⽂件夹admin,dashboard,notfound,list,setting
4. 在src⽬录下新建⼀个⽂件夹 router router中新建⼀个index.js(存放路由的集合)
5. 在index.js中引⼊，这样⼀级路由就已经配好了 当然我们可以直接在⾥⾯写很多个Route，但是为了优雅!!优雅 和代码的简洁性我们选择
把路由写在⼀个js⾥⾯统⼀管理
6. 接下来我们在router-index.js中继续写⼊
7. 我们的App.js中写⼊
8. 然后我们在Admin中使⽤antd组件，使⽤Layout布局，其中使⽤了装饰器,
import React, { Component } from 'react'
import { Layout, Menu, Icon } from 'antd';
import { withRouter } from "react-router-dom"
const { Header, Content, Sider } = Layout;
@withRouter  //withRouter是⾼阶组件, 使⽤它是因为需要使⽤this.pros⾥⾯的属性，这⾥使⽤了装饰器
class Admin extends Component {
go=({ item, key, keyPath, domEvent })=> {  //onClik那⾥虽然看不到传值，但是默认会传过来四个参数，详见官⽹react native
this.props.history.push(key)  //编程式导航
}
render() {
return <Layout>
<Header className="header">
<div style={{ color: "white" }}>我是头部</div>
</Header>
<Layout>
<Sider width={200} style={{ background: '#fff' }}>
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%', borderRight: 0 }}
>
<Menu.Item key="/home/dashboard" onClick={}><Icon type="dashboard" />DashBoard</Menu.Item>                        <Menu.Item key="/home/list" onClick={}><Icon type="unordered-list" />List</Menu.Item>
<Menu.Item key="/home/setting" onClick={}><Icon type="setting" />Setting</Menu.Item>
</Menu>
</Sider>
<Layout style={{ padding: '0 24px 24px' }}>
<Content
style={{
background: '#fff',
padding: 24,
margin: 0,
minHeight: 280,
}}
>
{this.props.children}  //这⾥接受<Admin>XXX</Admin>传过来的XXX
</Content>
</Layout>
</Layout>
</Layout>
}
}
export default Admin
9. ⼆级路由配置好了，启动服务可看 默认跳转⾄/home/dashboard

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。