-
Notifications
You must be signed in to change notification settings - Fork 20
/
9.routeConfigTable.js
86 lines (78 loc) · 1.9 KB
/
9.routeConfigTable.js
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/**
* Created by 王冬 on 2018/2/17.
* QQ: 20004604
* weChat: qq20004604
* 功能说明:
* 路由信息表
*/
import React from "react";
import {HashRouter as Router, Link, Route} from 'react-router-dom'
const createLink = (routes, props) => (
<ol>
{
routes.map(route => (
<li key={route.path}>
<Link to={`${props.match.url}/${route.path}`}>{route.name}</Link>
</li>
))
}
</ol>
)
const createRoute = (routes, props) => (
<React.Fragment>
{routes.map((route, i) => {
let obj = {
key: i,
...route,
path: `${props.match.url}/${route.path}`,
component: props => {
let obj = {routes: route.routes, ...props}
return <route.component {...obj}/>
}
}
return <Route {...obj}/>
})}
</React.Fragment>
)
const First = props => {
return <div>
路由 A
{createRouter(props.routes, props)}
</div>
}
const Second = () => <div>路由 B</div>
const ChildOne = () => <div style={{color: 'red'}}>路由 A1</div>
const RouteConfig = [
{
path: 'first',
component: First,
name: '第一个路由',
routes: [
{
path: '1',
component: ChildOne,
name: '1-1'
}
]
},
{
path: 'second',
component: Second,
name: '第二个路由'
}
]
const createRouter = (routes, props) => (
<Router>
<div>
{/* 自动生成 Link 标签 */}
{createLink(routes, props)}
<hr/>
{/* 自动生成 Route 标签 */}
{createRoute(routes, props)}
</div>
</Router>
)
const Root = props => (
createRouter(RouteConfig, props)
)
export default Root