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> ...
随机推荐
- python基础类型—集合
一,集合. 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了. ...
- mybatis06--动态sql
1.if标签 public interface StudentDao { /** *动态sql的查询 参数是Student对象 不确定 用户输入几个属性值 */ List<Student> ...
- 飞机躲避炮弹---java
最近闲来无事,花了一天多的时间写了一个小游戏,虽然说游戏本身很无聊吧,但是自己也从这个过程中学到了许多东西...分享一下. 代码内容自行理解吧... 层次结构: package cn.sxt.game ...
- Spring-Boot数据库密码加密配置
springboot集成mysql/oracle时需要在yml/properties中配置数据库信息,用户名密码是肯定有的,所以就涉及到密码的加密,当然不加密也是可以的,正如某位大佬所说的,不加密就像 ...
- day18 十八、random、shutil、shevle、logging
一.random 模块:随机数 1. import random # .[,]整数 random randint(,) print(random.randint(, )) # 随机产生[,]中的一个数 ...
- EF Unknown column 'Project1.FamilyMembers_ID' in 'field list'
产生成的查询语句中有:Project1.FamilyMembers_ID 字段 原因:就是对象主键对象中有一个属性!
- asp.net mvc ef 性能监控调试工具 MiniProfiler
MiniProfiler是一款针对.NET, Ruby, Go and Node.js的性能分析的轻量级程序.可以对一个页面本身,及该页面通过直接引用.Ajax.Iframe形式访问的其它页面进行监控 ...
- 范进中Nature——儒林外史新义
范进中Nature——儒林外史新义 范进发了文章回办公室,实验室一块儿搬砖的挂名作者俱各欢喜.正待烧锅煮方便面,只见他老板胡副教授,手里拿着一包外卖和一瓶红星二锅头,走了进来.范进向他作揖,坐下.胡副 ...
- 并行开发-Task
Task 对于多线程,经常使用的是Thread.在了解Task之前,如果要使用多核的功能可能就会自己来开线程,然而这种线程模型在.net 4.0之后被一种称为基于“任务的编程模型”所冲击,这就是Tas ...
- 关于SQL Server将一列的多行内容拼接成一行的问题讨论【转】
原文链接:https://blog.csdn.net/rolamao/article/details/7745972 比如表中有两列数据 : ep_classes ep_name AAA ...