这个例子比较简单,可以加深我们对路由三大组件BrowserRouter、Route、Link认识。
项目中我们肯定会涉及到传入参数不同但调入相同的页面。例如新闻列表与新闻详情页、产品列表与产品详情的关系,这些都需要我们传入参数,同时在子页面获取参数。该例子很好的解决了这一问题。
实现效果
![](https://i-blog.csdnimg.cn/blog_migrate/0943ddbd0f4dab79713ad4b6eb2ff561.png)
多个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