React-router4 嵌套路由探究
作者: dkvirus 发表于: 2018-10-19 16:57:17 最近更新: 2018-10-20 10:03:08

一、嵌套路由

React-router4 中路由当做普通 html 标签来用,<Route> 标签的 path 属性和浏览器地址栏相匹配时,就会使用 component 属性对应的组件替换自身所在位置。path 可以使用正则表达式,在一定程度上让路由控制变得更加灵活。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
HashRouter,
Route,
Link,
Switch
} from 'react-router-dom';

// 最外层布局
class BasicLayout extends Component {
render() {
return (
<div>
<h1>App</h1>
<ul>
<li><Link to="/">控制台</Link></li>
<li><Link to="/user">用户管理</Link></li>
<li><Link to="/role">角色管理</Link></li>
</ul>
{this.props.children}
</div>
);
}
}

// 控制台页面,首页显示
const DashBoard = () => {
<div>
<h3>控制台页面。</h3>
</div>
}

// 用户页面
const User = ({ match }) => (
<div>
<h2>用户页面。</h2>
<ul>
<li><Link to={`${match.url}/detail/ming`}>小明</Link></li>
<li><Link to={`${match.url}/detail/hong`}>小红</Link></li>
</ul>
<Route path={`${match.url}/detail/:name`} component={UserDetail}/>
</div>
)

// 用户详情页面
const UserDetail = ({ match }) => (
<div>
<h3>用户详情页面。</h3>
<h3>{match.params.name}</h3>
</div>
)

// 角色页面
const Role = () => (
<div>
<h3>角色页面。</h3>
</div>
)

ReactDOM.render(
(<HashRouter>
<BasicLayout>
<Route exact path="/" component={DashBoard} />
<Route path="/user" component={User} />
<Route path="/role" component={Role} />
</BasicLayout>
</HashRouter>),
document.getElementById('root')
);
路由(path) 组件/页面(component)
/ 控制台页面
/user 用户页面
/user/detail/1 用户详情页面; <= 这里就用到了 嵌套路由
/role 角色页面

二、多布局解决方案

一个系统可能有不止一种布局,dk 目前解决方法时使用不同的 路由前缀 进行区分。这里贴一下示例代码以供参考:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// 不同布局使用不同的【路由前缀】进行区分
<Switch>
<Route path="/rbac" component={RbacLayout} />
<Route path="/dashboard" component={DashboardLayout} />
</Switch>

// Rbac 布局,一般包含:用户、角色、机构菜单页面
class RbacLayout extends React.Component {
render () {
return (
<div>
<h1>Rbac布局</h1>
<Route to="/rbac/user" component={User} />
<Route to="/rbac/role" component={Role} />
</div>
)
}
}

const User = () => (
<div>
<h3>用户页面。</h3>
</div>
)

const Role = () => (
<div>
<h3>角色页面。</h3>
</div>
)

// 控制台布局,一般包含:业务控制台、开发控制台页面
class DashboardLayout extends React.Component {
render () {
return (
<div>
<h1>Dashboard布局</h1>
<Route to="/dashboard/business" component={Business} />
<Route to="/dashboard/develop" component={Develop} />
</div>
)
}
}

const Business = () => (
<div>
<h3>控制台布局 > 业务控制台页面。</h3>
</div>
)

const Develop = () => (
<div>
<h3>控制台布局 > 开发控制台页面。</h3>
</div>
)
首页
友链
归档
dkvirus
动态
RSS