20 React react-router4.x中实现路由模块化、以及嵌套路由父子组件传值

一、路由模块化（用自定义路由，然后循环出来）

1.官方文档参考

【官方文档】https://reacttraining.com/react-router/web/guides/quick-start
【路由模块化实例】https://reacttraining.com/react-router/web/example/route-config

2.路由模块化：实现代码

App.js

import React from "react";

import { BrowserRouter as Router, Route ,Link } from "react-router-dom";

import "./assets/css/index.css";


import Home from "./components/Home.js";
import User from "./components/User.js";
import Shop from "./components/Shop.js";
import News from "./components/News.js";

let routes = [
  {
    path: "/",
    component: Home,
    exact: true,
  },
  {
    path: "/user",
    component: User,
  },
  {
    path: "/shop",
    component: Shop,
  },
  {
    path: "/news",
    component: News,
  },
];


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <Router>
        <div className="App">
          {/* <Route path="/" exact component={Home}></Route>
          <Route path="/pcontent/:id" component={Pcontent}></Route>
          <Route path="/login"  component={Login}></Route> */}

          <div className="header">
            <Link to="/">首页</Link>
            <Link to="/user">个人中心</Link>
            <Link to="/shop">商户</Link>
            <Link to="/news">新闻</Link>
          </div>

          {
            routes.map((route,key)=>{

              if(route.exact){
                return  <Route key={key} path={route.path} exact component={route.component}></Route>
              }else{
                return  <Route key={key} path={route.path}   component={route.component}  ></Route>
              }

            })
          }

          {/* <Route path="/" exact component={Home}></Route>
          <Route path="/user"  component={User}></Route>
          <Route path="/shop"  component={Shop}></Route> */}
          

        </div>
      </Router>
    );
  }
}

export default App;

3.路由模块化：更进一步，把路由单独放到一个文件里
3.1第一步先把路由定义抽出来：/src/model/routes.js

routes.js

import Home from "../components/Home.js";
import User from "../components/User.js";
import Shop from "../components/Shop.js";
import ShopList from "../components/Shop/ShopList.js";
import ShopAdd from "../components/Shop/ShopAdd.js";
import News from "../components/News.js";

let routes = [
  {
    path: "/",
    component: Home,
    exact: true,
  },
  {
    path: "/user",
    component: User,
  },
  {
    path: "/shop",
    component: Shop,
  },
  {
    path: "/news",
    component: News,
  },
];
export default routes;

3.2第二步，引入routes.js到 /src/App.js

二、嵌套路由父子组件传值

src/model/router.js

import Home from "../components/Home.js";
import User from "../components/User.js";
import Shop from "../components/Shop.js";
import ShopList from "../components/Shop/ShopList.js";
import ShopAdd from "../components/Shop/ShopAdd.js";
import News from "../components/News.js";

let routes = [
  {
    path: "/",
    component: Home,
    exact: true,
  },
  {
    path: "/user",
    component: User,
  },
  {
    path: "/shop",
    component: Shop,
    routes: [
      {
        path: "/shop/",
        component: ShopList,
      },
      {
        path: "/shop/add",
        component: ShopAdd,
      },
    ],
  },
  {
    path: "/news",
    component: News,
  },
];
export default routes;

App.js

import React from "react";

import { BrowserRouter as Router, Route ,Link } from "react-router-dom";

import "./assets/css/index.css";

import  routes from "./model/router.js";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <Router>
        <div className="App">

          <div className="header">
            <Link to="/">首页</Link>
            <Link to="/user">个人中心</Link>
            <Link to="/shop">商户</Link>
            <Link to="/news">新闻</Link>
          </div>

          {
            routes.map((route,key)=>{

              if(route.exact){
                return  <Route key={key} path={route.path} exact  

                render={props => (
                  <route.component {...props} routes={route.routes} />
                )}

                ></Route>
              }else{
                return  <Route key={key} path={route.path}  
                
                render={props => (
                  <route.component {...props} routes={route.routes} />
                )}

                ></Route>
              }

            })
          }

          
        </div>
      </Router>
    );
  }
}

              

export default App;

Shop.js

src/components/Home.js、News.js、Shop.js、User.js
Shop.js重点，其它都一样

import React, { Component } from "react";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import ShopList from "./Shop/ShopList.js";
import ShopAdd from "./Shop/ShopAdd.js";

class Shop extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillMount(){

    console.log(this.props.routes);

  }

  render() {
    return (
      <div className="shopbox">
        <div className="content">
          <div className="left">
            <Link to="/shop/">商户列表</Link>
            <br/><br/>
            <Link to="/shop/add">增加商户</Link>
          </div>
          <div className="right">
            
            {
              this.props.routes.map((route,key)=>{

                  return <Route  key={key} path={route.path} exact component={route.component} ></Route>
            
              })
            }

            {/* <Route path={`${this.props.match.url}/`} exact component={ShopList} ></Route>
            <Route path={`${this.props.match.url}/add`} component={ShopAdd} ></Route> */}
          </div>
        </div>
      </div>
    );
  }
}

export default Shop;

/src/components/Shop/ShopAdd.js、ShopEdit.js、ShopList.js
内容都一样除了一些文字

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;