react-router-dom示例讲解（二）——URL参数

这个例子比较简单，可以加深我们对路由三大组件BrowserRouter、Route、Link认识。

项目中我们肯定会涉及到传入参数不同但调入相同的页面。例如新闻列表与新闻详情页、产品列表与产品详情的关系，这些都需要我们传入参数，同时在子页面获取参数。该例子很好的解决了这一问题。

实现效果

多个Link都对应这child这个组件，路径匹配通过path='/:id'来实现。

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li><Link to='/react-router'>React Router</Link></li>
            <li><Link to='/leoashin'>LeoAshin</Link></li>
            <li><Link to='/justjavec'>justjavac</Link></li>
            <li><Link to='/reacttraining'>React Training</Link></li>
          </ul>
          <hr />
          <Route path='/:id' component={Child}></Route>
        </div>
      </Router>
    )
  }
}

child组件则通过this.props.match.params.id来获取传入的参数。

import React, {Component} from 'react';
export default class Child extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.match.params.id}</h1>
      </div>
    )
  }
}

倘若你还不理解请参考我的github上的这个示例 https://github.com/guoqin721/react-router-dom2