1. 程式人生 > >react-router 參數獲取

react-router 參數獲取

list nds classname clas param 點擊 urn show lin

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 參數獲取