router动态传值
作者:互联网
1.设置规则
<Route path="/list/:id" component={List}/> {/* 1.规则 */}
2.传值(或在地址栏自己设置)
<li><Link to="/list/123">列表</Link></li>
3.接收值
import React, { Component } from 'react' class List extends Component{ constructor(props){ super(props); this.state={} } render(){ return(<h2>6666666666666666- {this.state.id}</h2>) } componentDidMount(){ console.log(this.props) //接收router传的值 let tempId=this.props.match.params.id this.setState({id:tempId}) } } export default List
模拟个人博客跳转
import React, { Component } from 'react' import {Link} from 'react-router-dom' class Index extends Component{ constructor(props){ super(props); this.state={ list:[ {cid:123,title:'Simoon的个人博客1'}, {cid:456,title:'Simoon的个人博客2'}, {cid:789,title:'Simoon的个人博客3'} ] } } render(){ return( <> <h2>Simoon</h2> <ul> { this.state.list.map((item,index)=>{ return( <li key={index}> <Link to={'/list/'+item.cid}>{item.title}</Link></li> ) }) } </ul> </> ) } } export default Index
标签:title,Component,id,state,props,router,动态,Simoon,传值 来源: https://www.cnblogs.com/Jarsmine/p/16369461.html