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(二)传参的更多相关文章

  1. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  2. React Router 4.0 实现路由守卫

    在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...

  3. 初步学习React Router 4.0

      React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...

  4. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  5. React Router 4.0 体验

    React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...

  6. react事件绑定,事件传参,input单向数据绑定

    import React, { Component } from 'react'; class New extends Component { constructor(props){ super(pr ...

  7. 从 Vue 的视角学 React(四)—— 组件传参

    组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式, ...

  8. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  9. vue 和 react 路由跳转和传参

                      react  1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...

  10. 笔记react router 4(二)

    上一篇我们提到react router 4的dom特性.那么这一次,我们来说一说4.X中的路由组件嵌套. 用过3.X的同学应该知道,路由组件的嵌套(即,路由的配置)方式是通过给<Route> ...

随机推荐

  1. cf 1110 D

    哇真难啊,没注意到 可以开 dp[N][3][3]这种性质,也就是三个相同的顺子可以变成三个刻子,所以我们维护顺子的数目就不用超过三了,又因为每张牌i,只会被i-1,i-2,影响,所以额外开两维记录( ...

  2. vue 拍照上传图片 demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue前后分离---数据模拟

    最近为在做CRM的前期工作,忙里偷闲写了个关于数据模拟方面的东西 主要是现在博客中满天都再说前后分离,但是还没有几个实际操作的---让许多新手{-_-} 方法一: 启动一个express静态服务器-- ...

  4. BOM设计的一些问题及解决方案探讨----合版BOM

    BOM是ERP的核心资料,也是比较难的一块,不仅涉及的内容多,要求准确性高,时效性也要求高.但传统的ERP在处理BOM时有不少问题,因此也有些软件公司引入了各种BOM类型,像"标准BOM&q ...

  5. php const常量 不能使用字符串连接符.链接

    class jdpay extends pay { const BASE_URL = "https://mapi.jdpay.com/npp10/"; private $agree ...

  6. JS常见的字符串操作

    1.charAt() 获取字符串指定位置的字符    用法:strObj是字符串对象,index是指定的位置,(位置从0开始数) strObj.charAt(index) 2. indexOf() 方 ...

  7. 使用hashlib进行登录校验

    注册登录和密码验证 用户注册时,文件中保存用户名,和密码的密文 登录时,密码与文件中的密文进行比较,如果相同就同意登录 import hashlib # 导入模块 def md5(username,p ...

  8. Intellij IDEA注册激活破解

    1.2017年适用(2016.3.5到2017.2.4版均生效) 安装IntelliJ IDEA 最新版 启动IntelliJ IDEA 输入 license时,选择输入 [License serve ...

  9. 使用Vivado初探ZedBoard的OLED驱动

    一.原理简介 Vivado版本:2016.2 OLED型号:128*32的UG-2832HSWEG04 ZedBoard的OLED部分电路原理图如下:(需要我们关心的是我用红色椭圆标注出来的3处,一共 ...

  10. java之动态代理

    摘要 相比于静态代理,动态代理避免了开发人员编写各个繁锁的静态代理类,只需简单地指定一组接口及目标类对象就能动态的获得代理对象. 这里说的静态代理可以理解为之前使用的装饰者模式,从之前使用装饰者模式实 ...