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 ...
随机推荐
- poj3067树状数组求逆序数
Japan plans to welcome the ACM ICPC World Finals and a lot of roads must be built for the venue. Jap ...
- PHP获取Mp3文件信息
扫描本地MP3文件,获取文件信息
- linux下fdisk分区管理、文件系统管理、挂载文件系统等
分区管理工具有:fdisk, parted, sfdisk fdisk:对于一块硬盘来讲,最多只能管理15分区: # fdisk -l [-u] [device...] 查看硬盘设备分区信息 # f ...
- 关于股票最佳买卖时机的lintcode代码
class Solution {public: /** * @param prices: Given an integer array * @return: Maximum pr ...
- (坑)django test在多线程下的问题
问题描述: 使用django自带的test做测试,尝试去数据库中取数据,主线程中没有问题,非主线程中取不到数据. 示例代码: class MyTestCase(TestCase): def setUp ...
- [笔记]SciPy、Matplotlib基础操作
NumPy.SciPy.Matplotlib,Python下机器学习三大利器.上一篇讲了NumPy基础操作,这节讲讲SciPy和Matplotlib.目前接触到的东西不多,以后再遇到些比较常用的再更新 ...
- 转:Linux中文显示乱码?如何设置centos显示中文
怎么设置Linux系统中文语言,这是很多小伙伴在开始使用Linux的时候,都会遇到一个问题,就是终端输入命令回显的时候中文显示乱码.出现这个情况一般是由于没有安装中文语言包,或者设置的默认语言有问题导 ...
- Kafka学习-复制
复制 Kafka可以通过可配置的服务器数量复制每个主题分区的日志(可以为每个主题设置复制因子).这允许在集群中的服务器发生故障时自动故障转移到其他副本,因此在存在故障的情况下,消息仍然可用. 其他消息 ...
- Java_中建立0-10M的消息(字符串)
直接用StringBuilder,它的append方法方便快速构建字符串. StringBuilder sb1=new StringBuilder(); for(int i=0;i<1024*1 ...
- Google Android Studio Kotlin 开发环境配置
Google 近日开发者大会宣布Kotlin成为Android开发的第一级语言,即Android官方开发语言,可见Google对Kotlin的重视,本文就介绍一下Android Studio下的Kot ...