react-router 参数获取

标签：tor   react   router   match   return   list   end   let   ram   

  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 参数获取

标签：tor   react   router   match   return   list   end   let   ram   

原文地址：http://www.cnblogs.com/lin920516/p/7041004.html