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. windows下安装Redis并部署成服务

    windows下安装Redis并部署成服务 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 一:下载 下载地址: windows版本: http ...

  2. 蓝桥杯-有理数类-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  3. iOS APP开发设置启动图片 Launch Image

    一.添加启动图片 点击Assets.xcassets进入图片管理,右击,弹出"New Launch Image"或点下面的+号创建Launch Image: 这里首先说明一下尺寸: ...

  4. Android ContentProvider详解

    1.概述 ContentProvider以Uri的形式对外提供数据,允许其他应用程序访问或者修改数据.也就是说你可以通过ContentProvider把应用中的数据共享给其他应用访问,其他应用可以通过 ...

  5. python-day2 字典

    ===========字典功能=============> dict.clear() -->清空字典 dict.keys() -->获取所有key dict.values() --& ...

  6. Day1 Python 介绍及基础

    ******************本文目录******************一.Pyhon基本介绍 1.Why Python? 2. Python 是一门什么样的语言? 3.Python的优缺点: ...

  7. VopSdk一个高逼格微信公众号开发SDK:自动化生产(装逼模式开启)

    VopSdk一个高逼格微信公众号开发SDK(源码下载) VopSdk一个高逼格微信公众号开发SDK:自动化生产(装逼模式开启) 针对第一版,我们搞了第二版本,老规矩先定个目标. 一 我们的目标 a.移 ...

  8. [笔记]A*寻路算法初探

    写在开始之前 最近突然对各路游戏的寻路算法很感兴趣,于是去学习了下游戏里的AI们是如何寻路的.网上相关内容很多,但同时有些说法也不一,制作自己的A* 算法时也有因不同的说法而困惑.整理多方资料并自己实 ...

  9. 【JAVAWEB学习笔记】27_Redis:在Linux上的安装、Jedis和常用命令

    一.Redis简介 1.关于关系型数据库和nosql数据库 关系型数据库是基于关系表的数据库,最终会将数据持久化到磁盘上,而nosql数据     库是基于特殊的结构,并将数据存储到内存的数据库.从性 ...

  10. Log4j2 — Log4j2导入、LogEvent、配置文件编写及路径

    1. Log4j2的导入 首先到http://logging.apache.org/log4j/2.x/download.html 上下载最新的log4j2的jar包,然后再eclipse中加入log ...