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. common lisp里的几个操作符

    setf  赋值操作符,定义一个全局变量.返回值是最后一个赋值的结果. let 局部变量操作符.let表达式有两部分组成.第一部分是任意多的变量赋值,他们被包裹在一个()中,第二部分是任意数量的表示式 ...

  2. Christmas Spruce

    Consider a rooted tree. A rooted tree has one special vertex called the root. All edges are directed ...

  3. Python学习之旅(二十四)

    Python基础知识(23):进程和线程(Ⅱ) 一.threadlocal 在多线程环境下,每个线程都有自己的数据 一个线程使用自己的局部变量比使用全局变量好,因为局部变量只有线程自己能看见,不会影响 ...

  4. windows环境下MySQL mysql-5.7.17-winx64 (社区服务版,community server)安装教程

    根据网上查询的资料显示,MySQ在版本5.7开始根目录下没有dada目录,需要额外的“初始化数据库”的操作自动生成data目录. 1.    下载地址: https://cdn.mysql.com// ...

  5. 对text字段聚合,没有设置fielddate所以出错

    http://192.168.60.26:9200/linewell_assets_mgt_es_yh_test/lw_devices/ _mapping { "properties&quo ...

  6. P5280 [ZJOI2019]线段树

    题目链接:洛谷 题目描述:[比较复杂,建议看原题] 这道题太神仙了,线段树上做树形dp. 根据树形dp的套路,都是按照转移的不同情况给节点分类.这里每次modify的时候对于节点的影响也不同,所以我们 ...

  7. 点击图片img提交form表单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  8. select()函数 的学习

    select()的介绍 全是拷贝的如下文章: https://www.cnblogs.com/wenqiang/p/5508541.html select()函数的用例代码摘录如下文章: https: ...

  9. [js]js杂项陆续补充中...

    hasOwnProperty判断对象是否有这个属性 p = { 'name': 'maotai', 'age': 22 }; console.log(p.hasOwnProperty('names') ...

  10. 266B

    #include <stdio.h> #define MAXSIZE 1024 char que[MAXSIZE]; int main() { int n, t; scanf(" ...