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. 进程锁Lock

    例1: 10个人去买票,先去查询余票,有票就去购买.代码如下: # ticket.py {"ticket": 1} # 只有一张票 import json import time ...

  2. CPanel/服务器文件及目录

    cPanel服务器默认的各主要目录及配置文件的路径.cPanel服务器很多配置文件的路径和通常情况下安装LAMP的不同,另外还有很多是属于cPanel面板自己的配置文件. 目录 1 Apache 2  ...

  3. 记一次Springboot启动异常

    启动Springboot项目报以下异常: org.springframework.context.ApplicationContextException: Unable to start web se ...

  4. Spring-Boot 访问Controller时报错可能会是这个坑

    报错信息: 代码: @Controller("/index") public class IndexController extends BaseController{ @GetM ...

  5. mysql InnoDB锁等待的查看及分析

    说明:前面已经了解了InnoDB关于在出现锁等待的时候,会根据参数innodb_lock_wait_timeout的配置,判断是否需要进行timeout的操作,本文档介绍在出现锁等待时候的查看及分析处 ...

  6. day20 二十、加密模块、操作配置文件、操作shell命令、xml模块

    一.加密模块 1.hashlib模块:加密 ①有解密的加密方式 ②无解密的加密方式:碰撞检查 -- 1)不同数据加密后的结果一定不一致 -- 2)相同数据的加密结果一定是一致的 import hash ...

  7. linux_rename命令用法

    rename在man中的解释为: NAME rename - rename files SYNOPSIS rename [options] expression replacement file... ...

  8. 项目实战02:nginx 反向代理负载均衡、动静分离和缓存的实现

    目录 实验一:实现反向代理负载均衡且动静分离 1.环境准备: 2.下载编译安装tengine 3.设置代理服务器的配置文件 4.启动tengine服务 5.开启后端的web服务 6.测试 实验二:ng ...

  9. vue问题大全

    什么是 mvvm? MVVM 是 Model-View-ViewModel 的缩写.mvvm 是一种设计思想.Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑:View ...

  10. java学习笔记-输入输出流

    ================File类 =====================InputStream ==================OutputStream ============== ...