react-router 参数获取
No BB!!! show me the code。
Main.js
import { BrowserRouter, Route, Link ,Switch} from 'react-router-dom'
class AppComponent extends React.Component {
<div className="index">
<BrowserRouter>
<div>
<ul>
<li><Link to="/">List</Link></li>
<li><Link to="/first">first</Link></li>
<li><Link to="/second/3333">second</Link></li>
</ul>
<Route exact path="/" component={List}/>
<Route path="/first" component={First} />
<Route path="/second/:id" component={Second} />
</div>
</BrowserRouter>
</div>
}
second/index.js
class Second extends React.Component{
constructor(props){
super(props)
}
render() {
let match=this.props.match.params
return(
<h1>我是second页面,路由id 是 {mathc.id}</h1>
)
}
}
当通过路由点击跳转到second页面的时候会 显示3333.
react-router 参数获取的更多相关文章
- React router 4 获取路由参数,跨页面参数
1. match通过路径 <Route path="/path/:name" component={example} /> 路由组件内获取参数使用 this.props ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- React Router基础使用
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
- React Router 使用教程
一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
- React Router v4 页面传值的三种方法
传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...
- React Router教程
React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...
- React Router 用法
React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...
- React Router基础教程
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
- React Router学习
React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...
随机推荐
- python自动化开发-[第一章]-练习题
1.使用while循环输入 1 2 3 4 5 6 8 9 10 i = 1 while i < 11: if i == 7: i += 1 continue print (i) i += 1 ...
- [内存管理]连续内存分配器(CMA)概述
作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 原文地址:http://lwn.net/Articles/396657/ 1 ...
- springcloud(一):大话Spring Cloud
研究了一段时间spring boot了准备向spirng cloud进发,公司架构和项目也全面拥抱了Spring Cloud.在使用了一段时间后发现Spring Cloud从技术架构上降低了对大型系统 ...
- 对游览器遭到劫持的处理方案(RemoveAds Not By This Site)
近期游览器一直被劫持 :火狐用不了,ie出毛病了,谷歌游览器也不好使了,已经快被逼疯!!! 但是事情总是向着美好的方向发展的么! 接下来就和大家一起分享一下我的解决经验! 首先用360杀毒(虽然大多数 ...
- poj2253 Frogger Dijkstra变形
题目链接:http://poj.org/problem?id=2253 就是求所有路径的最大边权值的最小值 处理时每次找出距离当前的已选的节点的最短距离,然后更新每个未选节点的值 代码: #inclu ...
- hive、impala集成ldap
1.概要 1.1 环境信息 hadoop:cdh5.10 os:centos6.7 user:root hive.impala已集成sentry 1.2 访问控制权限 这里通过使用openldap来控 ...
- SpringData系列一 Spring Data的环境搭建
本节作为主要讲解Spring Data的环境搭建 JPA Spring Data :致力于减少数据访问层(DAO)的开发量.开发者唯一要做的就是声明持久层的接口,其他都交给Spring Data JP ...
- ng-option
select 是 AngularJS 预设的一组directive.下面是其官网api doc给出的用法:AngularJS:select 大意是,select中的ngOption可以采用和ngRep ...
- 史诗手册!微信小程序新手自学入门宝典!
一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...
- iOS 比较版本号大小的方法
比较iOS版本号大小 eg:3.2.0和3.1.0 或者 3.2.0和3.2比较 返回bool值变量YES or NO -(BOOL)compareVesionWithServerVersion:(N ...