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