详情请点阅读全文
一、路由模块化（用字典定义路由，然后循环出来）
1.官方文档参考
【官方文档】https://reacttraining.com/react-router/web/guides/quick-start
【路由模块化实例】https://reacttraining.com/react-router/web/example/route-config
2.路由模块化：实现代码
其它代码参考：十七：https://blog.csdn.net/u010132177/article/details/103323644
主要内容：【1】、【2】处
App.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
| import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route,Link } from 'react-router-dom';
import Home from './components/home';
import User from './components/user';
let routes=[
{
path:'/',
exact:true,
component:Home
},
{
path:'/user/',
component:User
}
]
function App() {
return (
<Router>
<div>
<header className='header'>
<Link to='/'>首页</Link>
<Link to='user'>个人中心</Link>
</header>
{/* 【2】循环出来刚定义的数组内字典——模块块完成。注意此处的routes直接.map即可，不要加this了因为它就定义在页面上 */}
{
routes.map((v,k)=>{
if(v.exact){
return <Route exact path={v.path} component={v.component} />
}else{
return <Route path={v.path} component={v.component} />
}
})
}
</div>
</Router>
);
}
export default App;
|
3.路由模块化：更进一步，把路由单独放到一个文件里
第一步先把路由定义抽出来：/src/model/routes.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import Home from '../components/home';
import User from '../components/user';
let routes=[
{
path:'/',
exact:true,
component:Home
},
{
path:'/user/',
component:User
}
]
export default routes;
|
第二步，引入routes.js到 /src/App.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
| import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route,Link } from 'react-router-dom';
import routes from './model/routes.js';
function App() {
return (
<Router>
<div>
<header className='header'>
<Link to='/'>首页</Link>
<Link to='user'>个人中心</Link>
</header>
{/* 【2】循环出来刚定义的数组内字典——模块块完成。注意此处的routes直接.map即可，不要加this了因为它就定义在页面上 */}
{
routes.map((v,k)=>{
if(v.exact){
return <Route exact path={v.path} component={v.component} />
}else{
return <Route path={v.path} component={v.component} />
}
})
}
</div>
</Router>
);
}
export default App;
|
效果同上
二、嵌套路由父子组件传值
功能：把根组件的路由、User组件的路由抽出来放到独立的/model/router.js里做为一个文件，其内部含有根组件的路由，和子组件User.js的路由。以后配置无论哪个组件的路由都到这里去配置即可。
src/App.js重点1：向子组件传子路由
【1】向子组件传递子路由写法（原component必须删除）：
【2】向子组件传递子路由写法（原component必须删除）：
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
| import React from 'react';
import './assets/css/index.css';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
import routes from './model/router.js';
function App() {
return (
<Router>
<div>
<header className="title">
<Link to="/">首页组件</Link>
<Link to="/user">用户页面</Link>
<Link to="/shop">商户</Link>
<Link to="/news">新闻</Link>
</header>
{
routes.map((route,key)=>{
if(route.exact){
return <Route key={key} exact path={route.path}
// 【1】向子组件传递子路由写法（原component必须删除）：
render={props => (
// 通过扩展运算符...把当前页面的props传到子路由里去：
<route.component {...props} routes={route.routes} />
)}
/>
}else{
return <Route key={key} path={route.path}
render={props => (
// 【2】向子组件传递子路由写法（原component必须删除）：
<route.component {...props} routes={route.routes} />
)}
/>
}
})
}
</div>
</Router>
);
}
export default App;
|
src/model/router.js重点2：添加子路由配置信息
【1】嵌套路由
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
| import Home from '../components/Home';
import User from '../components/User';
import UserList from '../components/User/UserList';
import UserAdd from '../components/User/UserAdd';
import UserEdit from '../components/User/UserEdit';
import Shop from '../components/Shop';
import News from '../components/News';
let routes = [
{
path: "/",
component: Home,
exact:true
},
{
path: "/shop",
component: Shop
},
{
path: "/user",
component: User,
routes:[
{
path: "/user/",
component: UserList
},
{
path: "/user/add",
component: UserAdd
},
{
path: "/user/edit",
component: UserEdit
}
]
},
{
path: "/news",
component: News
}
];
export default routes;
|
src/components/Home.js、News.js、Shop.js、User.js内容略过…
User.js重点3：接收app.js传过来的子路由
【0】打印一下父组件传过来的子路由看看是否存在
【1】循环出来父组件传过来的子路由
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
| import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class User extends Component {
constructor(props) {
super(props);
this.state = {
msg:'我是一个User组件'
};
}
componentWillMount(){
console.log(this.props.routes);
}
render() {
return (
<div className="user">
<div className="content">
<div className="left">
<Link to="/user/">用户列表</Link>
<br />
<Link to="/user/add">增加用户</Link>
<br />
<br />
<Link to="/user/edit">编辑用户</Link>
</div>
<div className="right">
{
this.props.routes.map((route,key)=>{
return <Route key={key} exact path={route.path} component={route.component} />
})
}
{}
</div>
</div>
</div>
);
}
}
export default User;
|
/src/components/User/UserAdd.js、UserEdit.js、UserList.js
内容都一样除了一些文字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| import React, { Component } from 'react';
class UserAdd extends Component {
constructor(props) {
super(props);
this.state = {
msg:'我是一个User组件'
};
}
render() {
return (
<div className="user">
用户组件UserAdd
</div>
);
}
}
export default UserAdd;
|
效果同上节