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

Posted 2020-11-26 chenxi188

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

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

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';
//【1】定义一个数组，里面存放route的字典
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

import Home from '../components/home';
import User from '../components/user';
//【1】定义一个数组，里面存放route的字典
let routes=[
  {
    path:'/',
    exact:true,
    component:Home
  },
  {
    path:'/user/',
    component:User
  }
]
export default routes;

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

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

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}                     

                    // route.component     value.component   <User  {...props}  routes={route.routes} />
                    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;

src/model/router.js

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/assets/css/index.css

@charset "UTF-8";
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  margin: 0;
  padding: 0; }

.title{
  height: 44px;
  line-height:44px;

  background: #000;
  

}

.title a{
  color:#fff;
  padding:0 20px;

}

/*左右分栏*/

.content{

  width:100%;

  height: 500px;

  display:flex;
}

.content .left{

  width:200px;
  height: 500px;

  background: #eeee;

}

.content .right{

  flex:1;

  height: 500px;

  border:1px solid #000;

}

src/components/Home.js、News.js、Shop.js、User.js

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(){

        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">


                            {

                                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;

/src/components/User/UserAdd.js、UserEdit.js、UserList.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;

效果同上节