React第三方组件1(路由管理之Router的使用③传参)
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22
2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23
3、React第三方组件1(路由管理之Router的使用③传参)---2018.01.24
4、React第三方组件1(路由管理之Router的使用④按需加载-上)---2018.01.25
5、React第三方组件1(路由管理之Router的使用⑤按需加载-下)---2018.01.26
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
今天我们讲下,如何给路由转递参数,路由下组件如何接收参数!
我们要实现的目标是给demo2-2 路由传递参数!然后在TodoList下接收参数!
我们先用下 react-router-dom 的Link组件!
import React from 'react';
import TodoList from './TodoList';
import {Route, NavLink, Redirect,Link} from 'react-router-dom'
const Index = ({match}) =>
<div>
<div className="nav">
<NavLink to={`${match.url}/demo2-1`} activeClassName="selected" exact>demo2-1</NavLink>
{/*<NavLink to={`${match.url}/demo2-2`} activeClassName="selected" exact>demo2-2</NavLink>*/}
<Link to={{
pathname: `${match.url}/demo2-2`,
search: '?sort=this-sort',
hash: '#the-hash',
state: { fromDashboard: '222' }
}}>demo2-2</Link>
</div>
<Route exact path={`${match.url}`}
render={() => (<Redirect to={`${match.url}/demo2-1`}/>)}/>
<Route path={`${match.url}/demo2-1`} component={TodoList}/>
<Route path={`${match.url}/demo2-2`} component={TodoList}/>
</div>
;
export default Index;
其中:
pathname:路由地址
search:通俗一点讲就是url 中?后面的数据
hash :通俗一点讲就是在search后面再加#
state:通俗一点讲就是 转递一些 状态数据,可以是 对象、数组、字符串等
最后url会是这样子的
http://localhost:8080/#/demo2/demo2-2?sort=this-sort#the-hash
我们在TodoList里接收参数
let {location} = this.props;
{
location ?
<div>
<div>hash:{location.hash}</div>
<div>pathname:{location.pathname}</div>
<div>search:{location.search}</div>
<div>state:{location.state && location.state.fromDashboard}</div>
</div>
:
null
}
一切就绪,我们在浏览器里查看下效果!
这里都接收到了!
search 里的参数具体值可以这样获取:
import utils from '../../../public/js/utils';
<div>search:{utils.urlParam('sort',location.search)}</div>
大家发现没有 search hash都会在URL中出现
而state没有,所有当你刷新这个页面的时候,state会消失!
又出现一个新的问题:demo2-2 没有变红!
我们可以把数据放到 NavLink里:
<NavLink to={{
pathname: `${match.url}/demo2-2`,
search: '?sort=this-sort',
hash: '#the-hash',
state: { fromDashboard: '222' }
}} activeClassName="selected" exact>demo2-2</NavLink>
这样就是选中状态了!
这部分我讲的比较浅,大家实际应用中可能还会遇到其他种种情况!大家还是要多看官方文档!我只是抛砖引玉!
- CVE-2017-16943 Exim UAF漏洞分析——后续
- “盲”逆向:iOS 应用 Blind 寻踪
- 根据时间字段导入数据的问题总结 (r6笔记第6天)
- Gnuboard 漏洞分析
- 一次数据库宕机问题的分析(r6笔记第5天)
- PWN学习之house of系列(一)
- 清理session的小插曲(二) (r6笔记第4天)
- 3.训练模型之在GPU上训练的环境安装
- 深度学习对话系统实战篇 -- 简单 chatbot 代码实现
- pangrank算法--PageRank算法并行实现
- 刷爆朋友圈的 deepfakes 视频人物换脸是怎样炼成的?
- 干货 | ElasticSearch相关性打分机制
- FCN 的简单实现
- 2.运行一个demo
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ESP8266搭建web服务器
- 关于持续交付中Git分支管理的思考
- 轻松应对并发问题,Newbe.Claptrap 框架中 State 和 Event 应该如何理解?
- 如何暂停一个正在运行的线程?
- WebMonitor采集端优化之路
- 美颜算法之自动祛斑算法实现 | 案例分享
- 附025.kubeadm部署Kubernetes更新证书
- 消息提示时间的格式化例子(小程序)
- 【Spark】用scala2.11编译打包构建镜像
- 移动端事件穿透的原理与解决方案
- 你被追尾了
- 深入理解JavaScript作用域
- 《闲扯Redis七》Redis字典结构的底层实现
- 深入理解JavaScript闭包之什么是闭包
- 按需取余