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 参数获取的更多相关文章

  1. React router 4 获取路由参数,跨页面参数

    1. match通过路径 <Route path="/path/:name" component={example} /> 路由组件内获取参数使用 this.props ...

  2. [转] React Router 使用教程

    PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...

  3. React Router基础使用

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

  4. React Router 使用教程

    一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...

  5. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

  6. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  7. React Router教程

    React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...

  8. React Router 用法

    React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...

  9. React Router基础教程

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

  10. React Router学习

    React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...

随机推荐

  1. [CTSC2008] 网络管理

    题目描述 Description M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个部门之间协同工作,公司搭建了一个连接整个公司的通信网络.该网络的结构 ...

  2. EMMC与RAND的区别

    作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. EMMC与RAND的区别 说到两者的区别,必须从flash的发展历程说起,因 ...

  3. Laravel 5.2 教程 - 邮件

    一.简介 Laravel 的邮件功能基于热门的 SwiftMailer 函数库之上,提供了一个简洁的 API.Laravel为SMTP.Mailgun.Mandrill.Amazon SES.PHP的 ...

  4. 中美HTML5市场发展的简单对比

    1. HTML5的中美发展与应用对比 2014年下半年,HTML5在中国火了.个人用它开展自媒体,散播鸡汤:广告公司靠它做市场营销,从中获利:还有大公司的广告部.企业新媒体部或转型的媒体,利用它进行各 ...

  5. OA系统在实际应用中可发挥出的协同应用价值

    OA软件引进国内已有二十多年,早期的OA软件更多地是扮演一个"文秘"的角色,只进行一些基本的行政事务处理,创造的价值不大.但随着OA软件理论和技术的日趋成熟,OA软件摆脱了原有的局 ...

  6. abstract、virtual、sealed

    abstract与virtual前必有public 1.abstract,抽象 1)只要使用到了abstract定义了方法,那么类就一定得用abstract定义,public abstract,只有抽 ...

  7. centOS的命令行与图形页面之间的转换

    .命令行 -> 图形界面 注意:在安装CentOS7的时候要添加GUI图形界面,否则没有效果. # startx

  8. Java IO详解(一)------字节输入输出流

    File 类的介绍:http://www.cnblogs.com/ysocean/p/6851878.html Java IO 流的分类介绍:http://www.cnblogs.com/ysocea ...

  9. OutputStream类详解

    主要内容包括OutputStream及其部分子类,以分析源代码的方式学习.关心的问题包括:每个字节输出流的作用,各个流之间的主要区别,何时使用某个流,区分节点流和处理流,流的输出目标等问题. Outp ...

  10. 用ajax写分页查询-----2017-05-17

    要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...