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. cas错误:org.jasig.cas.client.validation.TicketValidationException: No principal was found in the response from the CAS server.

    这个问题困扰了我好几天,最终被这个哥们解决了,具体请参考:http://www.oschina.net/question/252484_149958?sort=time

  2. HTML5 拖放(Drag 和 Drop)功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

  3. linux安装vmware tools 步骤

    虚拟机 -- 安装 VMware Tools 会自动挂载光驱. 1.  cd /misc/cd 2.  copy 文件到临时文件夹cp VMwareTools-9.6.2-1688356.tar.gz ...

  4. git笔记--git@OSC

    之前安装了git,用了不久就升级系统了,发现又忘记了步骤,虽然网上有很多教程,但寻找需要浪费太多的时间,由于github连接比较慢,所以使用了开源中国的托管http://git.oschina.net ...

  5. LeetCode:60. Permutation Sequence,n全排列的第k个子列

    LeetCode:60. Permutation Sequence,n全排列的第k个子列 : 题目: LeetCode:60. Permutation Sequence 描述: The set [1, ...

  6. 如何在.Net中使用MongoDB

    最近在研究mongodb,针对.net 中使用mongodb的文章要么是早期的驱动版本,要么资料很少,所以写个随笔记录一下 本文主要记录 1.什么是MongoDB 2.MongoDB windows ...

  7. 4.从AbstractQueuedSynchronizer(AQS)说起(3)——AQS结语

    前两节的内容<2.从AbstractQueuedSynchronizer(AQS)说起(1)——独占模式的锁获取与释放> .<3.从AbstractQueuedSynchronize ...

  8. Ubuntu16.04 安装flash player

    sudo apt-get install browser-plugin-freshplayer-pepperflash

  9. Linux Set Command

    1. set -e "Exit immediately if a simple command exits with a non-zero status." When this o ...

  10. 企业账号打包如何通过HTML页面打开

    企业账号打包后 Plist文件加入前缀 href="itms-services://?action=download-manifest&url= Plist文件在服务器中的地址为:h ...