React-Router路由动态传值

当我们点击列表，想在url上面动态传递参数，然后详情页获取参数，查询数据，渲染数据，具体怎么做了？上代码
其实一行代码就搞定了

<Route path='/list/:id' component={List}></Route>
let  id = this.props.match.params.id;

好，具体来看
1：在AppRouter.js中,必须定义一个动态传递参数为id

function AppRouter(){
	return(
		<Router>
			<ul>
				<li><Link to='/'>首页</Link></li>
				<li><Link to='/list/123456'>列表</Link></li>
			</ul>
			<Route exact path='/' component={Index}></Route>
			<Route path='/list/:id' component={List}></Route>
		</Router>
	
	)
	
}

2：在List页面生命周期获取这个参数

	componentDidMount(){
		console.log(this.props);
                //获取页面传递过来的参数id
		let  id = this.props.match.params.id;
		this.setState({
			id
		})
	}

3：大功告成
来个小demo
Index.js

	constructor(props) {
	    super(props);
		this.state={
			arr:[
				{cid:123,title:"好好学习React"},
				{cid:456,title:"好好学习Vue"},
				{cid:789,title:"好好学习Node"},
			]
		}
	}

	render(){
		return(
			<div>
				<h2>我是首页</h2>
				<ul>
				{this.state.arr.map((item,key)=>{
					return <li key={key}>
							<Link to={`/list/${item.cid}`}>{item.title}</Link>
						</li>
					})
				}	
				
				</ul>
			</div>
		)
	}

效果图