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. office web apps 部署-搭建office web apps服务器

    二.搭建office web apps服务器 相关文件可以去焰尾迭分享的百度网盘下载,下载地址:http://pan.baidu.com/s/1o6tCo8y#path=%252Foffice%252 ...

  2. 【算法系列学习】线段树 单点覆盖,区间查询最大值 [kuangbin带你飞]专题七 线段树 B - I Hate It

    https://vjudge.net/contest/66989#overview #include<iostream> #include<cstdio> #include&l ...

  3. Stimulsoft报表操作笔记(一):统计

    一.引言 报表大家应该都知道是什么,简单来说就是用表格.图表等格式来动态显示数据.现在web系统中很多需要使用到报表统计.打印功能等,将所需用到的数据绑定到指定的位置,然后分类汇总,这样查看起来更清晰 ...

  4. react native 升级到0.31.0的相关问题 mac Android Studio开发环境

    报错Caused by: java.lang.ClassCastException: android.app.Application cannot be cast to com.facebook.re ...

  5. redis3.05安装

    #yum -y install gcc #cd /usr/local/src #tar -zxvf redis-3.0.5.tar.gz #cd redis-3.05/ #make PREFIX=/u ...

  6. poj 1001 分析

    1) n = 0; return 1: 2) n = 1; bool standardizeNumNoDot(string &s){标准化是一定要得} _将‘.’前后的〇全部去除,正常retu ...

  7. JS 基本数据类型和引用数据类型

    本文章已收录于:   .embody { padding: 10px 10px 10px; margin: 0 -20px; border-bottom: solid 1px #ededed } .e ...

  8. React入门---事件与数据的双向绑定-9

    上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...

  9. JQuery控制下拉列表

    //遍历option和添加.移除option function changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE ...

  10. js导出CSV

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...