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

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;

效果同上节

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

  1. 使用react进行父子组件传值

    在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...

  2. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  3. angular 4+中关于父子组件传值的示例

    home.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-hom ...

  4. React中父子组件传值

    一.首先我们先来看父组件向子组件传值 1.1 我们要明白父组件 --> 子组件 是通过props这个属性来传值的 我们来看父组件的代码 import React from 'react'; im ...

  5. 【React入门】React父子组件传值demo

    公司一直是前后端分离的,最近集团开始推进中后台可视化开发组件(基于React封装),跟师兄聊起来也听说最近对后台开发人员的前端能力也是越来越重视了.所以作为一名后端,了解下前端的框架对自己也是大有好处 ...

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

      零.this.props     可以接收到 外界的传值 和 此组件标签内部自定义的方法       例:         <one vals={message} sendVal={this ...

  7. vue中父子组件传值问题 通过props 和 $emit()方法

    (代码在最后) 1.父组件给子组件传值直接通过props,听着很简单,但是对于初学者来说还是比较难以理解的,今天小白通过自己的实践操作结合代码分析一下 案例  把模态框单独的抽离出来,当作一个组件 第 ...

  8. vue 中父子组件传值:props和$emit

    更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...

  9. angular学习笔记(二十八-附2)-$http,$resource中的promise对象

    下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...

随机推荐

  1. 3_03_MSSQL课程_Ado.Net_登录复习和ExcuteScalar

    SQL注入 ->登陆窗体破解 ->配置文件 ->首先在 app.Config文件中添加 节点,如下: <connectionStrings> <add name=& ...

  2. JS 数组相关

    数组 function SelectLoadTable() { var mids = $("#mids").val(); var halls = $("#halls&qu ...

  3. MD5摘要

    MD5简介 MD5即Message-Digest Algorithm 5(信息-摘要算法),属于摘要算法,是一个不可逆过程,就是无论多大数据,经过算法运算后都是生成固定长度的数据,结果使用16进制进行 ...

  4. 「NOI2005」维护数列

    「NOI2005」维护数列 传送门 维护过程有点像线段树. 但我们知道线段树的节点并不是实际节点,而平衡树的节点是实际节点. 所以在向上合并信息时要加入根节点信息. 然后节点再删除后编号要回退(栈), ...

  5. Django 学习 之ORM多表操作

    一.创建模型 1.模型关系整理 创建一对一的关系:OneToOne("要绑定关系的表名") 创建一对多的关系:ForeignKey("要绑定关系的表名") 创建 ...

  6. 笔记||Python3进阶之调用外部程序

    像wget可以下载文件 ffmpeg可以切割.合并.转换.录制视频 free命令可以查看linux内存使用信息 python提供了库来调用外部程序.命令?> 最常见的两种方法:       ①o ...

  7. vb.net 写日志文件

    Module mod_LogAccessHt #Region "Const" Public Const __PREFIX_ERROR__ As String = "Err ...

  8. 常用的UI控件

    关于本文:作为一名iOS软件工程师,熟练规范的使用常用的UI控件是必备的基础技能. 指示器(UIActivityIndicatorView)----转动的等待小菊花 提醒对话框(UIAlertView ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. Codeforces 598D:Igor In the Museum

    D. Igor In the Museum time limit per test 1 second memory limit per test 256 megabytes input standar ...