Skip to content

Commit f74e7e2

Browse files
weizhanzhanweizhanzhan
committed
模板基础配置和多级路由配置和地址路由联动
1 parent 6c2e733 commit f74e7e2

File tree

9 files changed

+208
-63
lines changed

9 files changed

+208
-63
lines changed

Diff for: ‎src/App.js

+5-13
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,16 @@
11
import React from 'react';
22
import Login from './views/Login'
33
import Layout from './views/Layout'
4-
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
4+
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
55

6-
function Index() {
7-
return <h2>Home</h2>;
8-
}
9-
10-
function Users() {
11-
return <h2>Users</h2>;
12-
}
136

147
function App() {
158
return (
169
<Router>
17-
18-
<Route path="/layout" component={Layout} />
19-
<Route path="/login" component={Login} />
20-
<Route path="/users" component={Users} />
21-
10+
<Switch>
11+
<Route path="/login" component={Login} />
12+
<Route component={Layout} />
13+
</Switch>
2214
</Router>
2315
);
2416
}

Diff for: ‎src/router/index.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
const router = [
3+
{
4+
path:'/blog',title:'Blog',
5+
children:[
6+
{ path:'/blog/list',title:"List" ,component:()=>import('../views/Blog/List')},
7+
{ path:'/blog/create',title:"Create" ,component:()=>import('../views/Blog/Create')}
8+
]
9+
},
10+
{
11+
path:'/account',title:'Account',
12+
children:[
13+
{ path:'/account/index',title:"Index" ,component:()=>import('../views/Account/index')},
14+
{ path:'/account/setting',title:"Setting" ,component:()=>import('../views/Account/Setting')},
15+
{ path:'/account/more',title:"More" ,component:()=>import('../views/Account/More'),
16+
children:[
17+
{ path:'/account/more/role' ,title:'Role' ,component:()=>import('../views/Account/Role')}
18+
]
19+
}
20+
]
21+
}
22+
]
23+
export default router

Diff for: ‎src/views/Account/More.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React,{Component} from 'react';
2+
import { withRouter } from 'react-router';
3+
import { Link } from 'react-router-dom'
4+
class AccountMore extends Component{
5+
render(){
6+
return(
7+
<div>
8+
<h1>个人主页More</h1>
9+
<Link to='/blog/list'>list</Link>
10+
</div>
11+
)
12+
}
13+
}
14+
export default withRouter(AccountMore)

Diff for: ‎src/views/Account/Role.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React,{Component} from 'react';
2+
import { withRouter } from 'react-router';
3+
import { Link } from 'react-router-dom'
4+
class AccountRole extends Component{
5+
render(){
6+
return(
7+
<div>
8+
<h1>AccountRole</h1>
9+
<Link to='/blog/list'>list</Link>
10+
</div>
11+
)
12+
}
13+
}
14+
export default withRouter(AccountRole)

Diff for: ‎src/views/Account/Setting.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React,{Component} from 'react';
2+
import { withRouter } from 'react-router';
3+
import { Link } from 'react-router-dom'
4+
class AccountSetting extends Component{
5+
render(){
6+
return(
7+
<div>
8+
<h1>个人设置</h1>
9+
<Link to='/blog/list'>list</Link>
10+
</div>
11+
)
12+
}
13+
}
14+
export default withRouter(AccountSetting)

Diff for: ‎src/views/Account/index.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React,{Component} from 'react';
2+
import { withRouter } from 'react-router';
3+
import { Link } from 'react-router-dom'
4+
class AccountIndex extends Component{
5+
render(){
6+
return(
7+
<div>
8+
<h1>个人主页</h1>
9+
<Link to='/blog/list'>list</Link>
10+
</div>
11+
)
12+
}
13+
}
14+
export default withRouter(AccountIndex)

Diff for: ‎src/views/Blog/Create/index.js

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1-
import React from 'react';
2-
3-
function CreateBlog (){
4-
return(
5-
<div>Create</div>
6-
)
1+
import React,{Component} from 'react';
2+
import { withRouter } from 'react-router';
3+
import { Link } from 'react-router-dom'
4+
class CreateBlog extends Component{
5+
render(){
6+
return(
7+
<div>
8+
<h1>Create</h1>
9+
<Link to='/blog/list'>list</Link>
10+
</div>
11+
)
12+
}
713
}
8-
export default CreateBlog
14+
export default withRouter(CreateBlog)

Diff for: ‎src/views/Layout/components/Sider.js

+95-25
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,102 @@
1-
import React from 'react';
1+
import React,{Component} from 'react';
22
import { Layout, Menu, Icon } from 'antd';
33
import '../index.css'
4+
import Router from '../../../router'
5+
import { withRouter } from 'react-router';
6+
import { Link } from 'react-router-dom'
47
const { Sider } = Layout;
58
const { SubMenu } = Menu;
69

7-
function WSider (props){
8-
return(
9-
<Sider collapsible collapsed={props.collapsed} onCollapse={props.onCollapse}>
10-
<div className="logo" />
11-
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
12-
<SubMenu
13-
key="sub1"
14-
title={
15-
<span>
16-
<Icon type="user" />
17-
<span>Blog</span>
18-
</span>
19-
}
10+
class WSider extends Component{
11+
constructor(props){
12+
super(props)
13+
14+
//改变方法内this指向
15+
this.onOpenChange = this.onOpenChange.bind(this)
16+
}
17+
state = {
18+
openKeys: [],
19+
};
20+
21+
componentWillReceiveProps(){
22+
/*
23+
* 该生命周期函数内 改变state属性 不会导致无限循环
24+
* 在这里根据路由地址（this.props.history.location.pathname ！！！注意是props.history 不是 props.location ,后者是开始跳转的地址，前者才是跳转后的地址）
25+
* 根据地址解析openKeys（展开的subMenu）
26+
* 自己定义的路由表是有规则的，比方说 /blog/list, 那么我的以及路由就定义为/blog,二级路由为 /blog/list,
27+
* 那么我解析默认展开的subMenu的原理就是 通过二级地址/blog/list 去解析得到一级路由 /blog(三级路由以及多级路由以此类推)
28+
* 和这个生命周期函数能实现一样操作的方法，见我componentDidMount的方法 history.listen 一样可以监听到路由的变化
29+
*/
30+
this.setRouteChangeMenuState()
31+
}
32+
componentDidMount(){
33+
this.setRouteChangeMenuState()
34+
// this.props.history.listen(() => {
35+
// this.setRouteChangeMenuState()
36+
// })
37+
}
38+
render(){
39+
40+
const { location:{ pathname } ,collapsed ,onCollapse} = this.props
41+
return(
42+
<Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
43+
<div className="logo" />
44+
<Menu
45+
theme="dark"
46+
selectedKeys={[pathname]}
47+
mode="inline"
48+
onOpenChange={this.onOpenChange}
49+
openKeys={this.state.openKeys}
2050
>
21-
<Menu.Item key="3">List</Menu.Item>
22-
<Menu.Item key="4">Create</Menu.Item>
23-
</SubMenu>
24-
<Menu.Item key="9">
25-
<Icon type="setting" />
26-
<span>Setting</span>
27-
</Menu.Item>
28-
</Menu>
29-
</Sider>
30-
)
51+
{this.initMenus(Router)}
52+
</Menu>
53+
</Sider>
54+
)
55+
}
56+
setRouteChangeMenuState(){
57+
let props = this.props
58+
let openKeys = props.history.location.pathname
59+
console.log(openKeys.split('/'))
60+
openKeys = '/'+openKeys.split('/')[1]
61+
this.setState({
62+
openKeys:['/'+openKeys.split('/')[1]]
63+
});
64+
}
65+
onOpenChange = (openKeys) => {
66+
const currentKeys = openKeys.length?openKeys[openKeys.length-1]:''
67+
console.log('currentKeys',currentKeys, [currentKeys]);
68+
this.setState({
69+
openKeys:[currentKeys]
70+
});
71+
}
72+
73+
initMenus(routes){
74+
const menus = []
75+
routes.forEach(router =>{
76+
if('children' in router){
77+
const route = (
78+
<SubMenu
79+
key={router.path}
80+
title={
81+
<span>
82+
<Icon type="user" />
83+
<span>{router.title}</span>
84+
</span>
85+
}
86+
>
87+
{this.initMenus(router.children)}
88+
</SubMenu>
89+
)
90+
menus.push(route)
91+
}else{
92+
const route = ( <Menu.Item key={router.path}>
93+
{router.title}
94+
<Link to={router.path}>{router.title}</Link>
95+
</Menu.Item>)
96+
menus.push(route)
97+
}
98+
})
99+
return menus
100+
}
31101
}
32-
export default WSider
102+
export default withRouter(WSider)

Diff for: ‎src/views/Layout/index.js

+16-18
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,15 @@
11
import React,{ Component } from 'react'
2-
import { Layout, Menu, Breadcrumb } from 'antd';
2+
import { Layout, Breadcrumb } from 'antd';
3+
import { Route } from 'react-router-dom'
34
import WSider from './components/Sider'
45
import BlogList from '../Blog/List'
5-
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
6-
6+
import BlogCreate from '../Blog/Create'
7+
import AccountIndex from '../Account/index'
8+
import AccountSetting from '../Account/Setting'
9+
import AccountMore from '../Account/More'
10+
import AccountRole from '../Account/Role'
711
const { Header, Content, Footer, } = Layout;
812

9-
function test1(){
10-
return(
11-
<div>Hello</div>
12-
)
13-
}
14-
15-
function test2(){
16-
return(
17-
<div>Hello2</div>
18-
)
19-
}
2013

2114
class Layouts extends Component{
2215
state = {
@@ -37,10 +30,15 @@ class Layouts extends Component{
3730
<Breadcrumb.Item>Bill</Breadcrumb.Item>
3831
</Breadcrumb>
3932
<div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
40-
<Link to="/layout/test1">test1</Link>
41-
<Link to="/layout/test2">test2</Link>
42-
<Route path="/layout/test1" exact component={test1} />
43-
<Route path="/layout/test2" exact component={test2} />
33+
34+
<Route path="/blog/list" component={BlogList} />
35+
<Route path="/blog/create" component={BlogCreate} />
36+
<Route path="/account/index" component={AccountIndex} />
37+
<Route path="/account/setting" component={AccountSetting} />
38+
39+
<Route path="/account/more/role" component={ AccountRole }/>
40+
41+
<Route path="/account/more" component={ AccountMore }/>
4442
</div>
4543
</Content>
4644
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>

0 commit comments

Comments
 (0)