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

一、路由模块化(用字典定义路由,然后循环出来)

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;

效果同上节

原文地址:https://www.cnblogs.com/chenxi188/p/11969740.html

时间: 2024-11-29 09:22:27

十八、React react-router4.x中:实现路由模块化、以及嵌套路由父子组件传值的相关文章

react父子组件传值

react均是以组件构成,那父子组件传值就很重要了 父组件传值给子组件,不仅可以传值,传事件,还可以传实例 1.父组件传值给子组件 传值 父组件: import React from 'react'; import Children from './Children'; class Father extends React.Component { constructor(props) { super(props); this.state = { msg:'父组件的msg' }; } render

react基础总结篇1,定义组件实现父子组件传值

前端时间学习了vue,这几天开始入手react了. react项目搭建起来之后,我们一定会定义很多个组件.同样的也会涉及到父子组件的传值.今天来整理一下这个知识. 1,定义子组件步骤 1,引入react. import React,{Component} from 'react'; import './style.less'; 2,写组件并export default导出去用到了es6中的calss语法,提前说一下,this.props.content用来接收父组件中content的值,this

React教程:父子组件传值(组件通信)

1.父组件传值子组件 在引用子组件的时候传递,相当于一个属性,例如:在子组件内通过porps.param获取到这个param的值. 父组件向子组件传值,通过props,将父组件的state传递给了子组件. 父组件代码片段: constructor(props){ super(props) this.state={ message:"i am from parent" } } render(){ return( <Child txt={this.state.message}/>

React 父子组件和非父子组件传值

零.this.props 可以接收到 外界的传值 和 此组件标签内部自定义的方法 例: <one vals={message} sendVal={this.handleReverse.bind(this)}></one> 此时在子组件中打印this.props this.props = { vals : '**', sendVal : fn } 由此我们可以进行父子组件之间传值 一.父传子 在子组件标签中用自定义属性进行传递,接收的时候通过this.props进行接收 /* 父组件

vue中父子组件传值

vue中,在子组件设置props对象,来接受父组件传来的值 父组件中,:冒号后面的绿色变量必须和子组件中props的变量保持一致 子组件: type设置值的类型 default设置默认值,当没有给子组件传值时使用default里的内容 子传父: $emit 如果是子组件想传递数据给父组件,需要派发自定义事件,使用 $emit 派发,父组件使用v-on接收监控(v-on可以简写成@) 父组件在html代码中这样接收,changeSelect是一个自己在methods中定义的方法 子组件在metho

【cocos2d-js官方文档】十八、Cocos2d-JS v3.0中的属性风格API

1. 新的API风格 我们直接来看看你可以如何使用Cocos2d-JS v3.0: 以前的API 新的API node.setPosition(x, y); node.x = x; node.y = y; node.setRotation(r); node.rotation = r; 如表格中可以看到的,设置position属性的函数调用在3.0版中会被替换为直接的对象属性存取.不仅仅是示例中的x,y和rotation,几乎所有节点类型中关于属性存取的函数都会被替换为直接的对象属性访问.具体的属

第十八篇:在SOUI中实现PreTranslateMessage

在MFC中,通常可以通过重载CWnd::PreTranslateMessage这样一个虚函数来实现对一些窗口消息的预处理.多用于tooltip的显示控制. 在SOUI中也实现了类似的机制. 要在SOUI中实现PreTranslateMessage,我们首先需要实现一个接口: struct IMessageFilter { virtual BOOL PreTranslateMessage(MSG* pMsg) = 0; }; 可以看出,实现这个接口和在MFC中重载PreTranslateMessa

转: 【Java并发编程】之十八:第五篇中volatile意外问题的正确分析解答(含代码)

转载请注明出处:http://blog.csdn.net/ns_code/article/details/17382679 在<Java并发编程学习笔记之五:volatile变量修饰符-意料之外的问题>一文中遗留了一个问题,就是volatile只修饰了missedIt变量,而没修饰value变量,但是在线程读取value的值的时候,也读到的是最新的数据.但是在网上查了很多资料都无果,看来很多人对volatile的规则并不是太清晰,或者说只停留在很表面的层次,一知半解. 这两天看<深入Ja

【leetcode 简单】第十八题 删除排序链表中的重复元素

给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2 输出: 1->2 示例 2: 输入: 1->1->2->3->3 输出: 1->2->3 /** * Definition for singly-linked list. * struct ListNode { * int val; * struct ListNode *next; * }; */ struct ListNode* deleteDupli