React学习20----react-router4.x中实现路由模块化，以及嵌套路由父子组件传值
把
https://blog.csdn.net/zhaihaohao1/article/details/87966970
中的路由封装成模块
使用起来更加方便：
封装1：
把路由定义成一个数组 routes
配置的时候循环数组，配置
如下：
App.js
import React, { Component } from 'react';
import logo from './assets/images/logo.svg';
import './assets/css/App.css';
import Home from "./components/Home";
import Shop from "./components/Shop";
import User from "./components/User";
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
// 定义数组中定义一个路由对象，配置路由
let routes =[
{
path :'/',
component:Home,
exact:true,
},
{
path :'/user',
component:User,
},
{
path :'/shop',
component:Shop,
},
]
class App extends Component {
render() {
return (
<Router>
<div>
{/*上面显示两个标题*/}
<header className="title">
<Link to="/">首页组件</Link>
<Link to="/user">用户页面</Link>
<Link to="/shop">商户页面</Link>
</header>
{/*循环配置路由*/}
{
routes.map( (value,key)=> {
//判断默认路由
if (value.exact){
return <Route key={key} exact path={value.path} component={value.component}/>;
} else{
return <Route key={key} path={value.path} component={value.component}/>;
}
})
}
</div>
</Router>
);
}
}
export default App;
源码下载：
rdemo20
https://download.csdn.net/download/zhaihaohao1/10980497
封装2：
在上面的基础上，把数组单独抽出来，写成一个模块 router.js
在APP.js 中，循环数组配置路由
项目结构：
router.js
import Home from '../components/Home';
import User from '../components/User';
import Shop from '../components/Shop';
/**
* 模块化配置路由
* @type {*[]}
*/
let routes = [
{
path: "/",
component: Home,
exact:true
},
{
path: "/shop",
component: Shop
},
{
path: "/user",
component: User
},
];
export default routes;
App.js
import React, { Component } from 'react';
import './assets/css/App.css';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import routes from './model/router.js';
class App extends Component {
render() {
return (
<Router>
<div>
{/*上面显示两个标题*/}
<header className="title">
<Link to="/">首页组件</Link>
<Link to="/user">用户页面</Link>
<Link to="/shop">商户页面</Link>
</header>
{/*循环配置路由*/}
{
routes.map( (value,key)=> {
//判断默认路由
if (value.exact){
return <Route key={key} exact path={value.path} component={value.component}/>;
} else{
return <Route key={key} path={value.path} component={value.component}/>;
}
})
}
</div>
</Router>
);
}
}
export default App;
源码下载：
rdemo20_2
https://download.csdn.net/download/zhaihaohao1/10980497
封装3
在上面的基础上
嵌套路由的配置
router.js 中把路由嵌套起来
App.js循环配置，并把子路由传给 User.js
User.js 接收到App.js传过来的路由 循环配置
就是对
https://blog.csdn.net/zhaihaohao1/article/details/87966970
的封装
router.js
import Shop from '../components/Shop';
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';
/**
* 模块化，配置嵌套路由
*
*/
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
}
]
},
];
export default routes;
App.js
import React, {Component} from 'react';
import './assets/css/App.css';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import routes from './model/router.js';
class App extends Component {
render() {
return (
<Router>
<div>
{/*上面显示两个标题*/}
<header className="title">
<Link to="/">首页组件</Link>
<Link to="/user">用户页面</Link>
<Link to="/shop">商户页面</Link>
</header>
{/*循环配置路由*/}
{
routes.map((route, key) => {
if (route.exact) {
return <Route key={key} exact path={route.path}
// route.component value.component
// 下面的代码，相当于 <User {...props} routes={route.routes} />
// route.routes 把值传给 User 组件
render={props => (
// pass the sub-routes down to keep nesting
<route.component {...props} routes={route.routes}/>
)}
/>
} else {
return <Route key={key} path={route.path}
render={props => (
// pass the sub-routes down to keep nesting
<route.component {...props} routes={route.routes}/>
)}
/>
}
})
}
</div>
</Router>
);
}
}
export default App;
User.js
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() {
//App.js 拿到传过来的值
console.log(this.props.routes);
}
render() {
return (
<div className="user">
<div className="content">
<div className="left">
<Link to="/user/">用户列表</Link>
<br/>
<br/>
<Link to="/user/add">增加用户</Link>
<br/>
<br/>
<Link to="/user/edit">编辑用户</Link>
</div>
<div className="right">
{
//App.js 拿到传过来的值,并循环配置路由
this.props.routes.map((route, key) => {
return <Route key={key} exact path={route.path} component={route.component}/>
})
}
{/* <Route path="/user/add" component={UserAdd} /> */}
</div>
</div>
</div>
);
}
}
export default User;
源码下载：
rdemo20_3
https://download.csdn.net/download/zhaihaohao1/10980497