react-router 4.0(二)传参
import React from 'react';
import ReactDOM from 'react-dom'
import {Link,Route,HashRouter} from 'react-router-dom' export default class App extends React.Component { render(){
return(
<HashRouter>
<div>
<Link to="/">主页</Link>
<Link to="/one">第一页</Link>
<Link to="/two/value">第二页</Link> <Route exact path="/" render={()=>(
<h2>主页</h2>
)}/>
<Route exact path="/:one" render={({match})=>{
// render默认注入一个对象,有三个字段,history,location,match
return(
<h2>{match.params.one}</h2>
)
}}/>
<Route path="/two/:value" render={({match})=>{
return(
<h2>{match.params.value}</h2>
)
}}/>
</div>
</HashRouter>
)
}
} ReactDOM.render(<App/>,document.getElementById("app"))
react-router 4.0(二)传参的更多相关文章
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- React Router 4.0 实现路由守卫
在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...
- 初步学习React Router 4.0
React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...
- React Router 4.0 + webpack 实现组件按需加载
网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...
- React Router 4.0 体验
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...
- react事件绑定,事件传参,input单向数据绑定
import React, { Component } from 'react'; class New extends Component { constructor(props){ super(pr ...
- 从 Vue 的视角学 React(四)—— 组件传参
组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式, ...
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- vue 和 react 路由跳转和传参
react 1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...
- 笔记react router 4(二)
上一篇我们提到react router 4的dom特性.那么这一次,我们来说一说4.X中的路由组件嵌套. 用过3.X的同学应该知道,路由组件的嵌套(即,路由的配置)方式是通过给<Route> ...
随机推荐
- B - 吉哥系列故事——恨7不成妻
单身! 依然单身! 吉哥依然单身! DS级码农吉哥依然单身! 所以,他生平最恨情人节,不管是214还是77,他都讨厌! 吉哥观察了214和77这两个数,发现: 2+1+4=7 7+7=72 77=71 ...
- 修改phpcms默认分页样式
#pages { padding-top:30px;text-align:center;font:12px '微软雅黑';} #pages a { display:inline-block; padd ...
- PHP中通过bypass disable functions执行系统命令的几种方式
原文:http://www.freebuf.com/articles/web/169156.html 一.为什么要bypass disable functions 为了安全起见,很多运维人员会禁用PH ...
- what is spring-cloud
什么是Spring-cloud ? Spring Cloud是一系列框架的集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消息总线.负载均 ...
- 微信小程序开发笔记04
今天将小程序的页面进行优化 消除昨天遇到的bug问题. 完成了微信小程序的开发.
- Python学习之旅(二十七)
Python基础知识(26):常用内建模块(Ⅱ) 1.hashlib Python的hashlib提供了常见的摘要算法,如MD5,SHA1等 摘要算法又称哈希算法.散列算法. (1)它通过一个函数,把 ...
- 我了解到的新知识之—Apple Captive Portal 网页认证登陆公共Wifi
因为今天一个用户遇到选择公司WiFi后,无法弹出网页认证登陆界面的问题,随即上网搜索相关信息,因为公司内没有VPN,无法FQ,只能用bing来搜索一下相关信息了. Captive Portal听起来好 ...
- OAuth2.0的原理介绍
OAuth2.0是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2.0版. OAuth2.0(开放授权)是一个正式的互联网标准协议. 允许第三方网站在用户 ...
- Python2与python3 文件操作关于打开文件
#首先在python3中操作文件只有一种选择,那就是open() #而在python2中则有两种方式:file()与open() 两者都能够打开文件,对文件进行操作,也具有相似的用法和参数,但是,这两 ...
- findStr
目录 规则 目录结构 src/main.cpp src/findstr.cpp include/findstr.h ft/TestCase.cpp ft/makefile ftbuild.sh mai ...