react router给Route组件设置自定义属性
程序员文章站
2022-06-03 21:34:03
...
场景分析
当使用Route在页面内做跳转时,有时想要传一些自定义属性到子路由组件中,而常用的
<Route path={xxx} component={Component} test={123}/>
这种方式设置test属性是无效的,因此需要用到Route的第二种渲染方式
解决办法
Route组件的render方法
<Route path="/home" render={(props) => <Component test={123} {...props}/>}/>
应用拓展
在前端路由嵌套后,当子路由组件想要在unmount后刷新父路由组件时,可以通过上述方法将父路由的加载数据方法传递到子组件再调用
componentDidMount(){
this.getLists(); //获取数据列表方法
}
render(){
<div className="parentComponent">
<ul>
{this.state.list.map((item)=>{
return (<li>{item.value}</li>)
})}
</ul>
<Route path={`${match.url+'/:id'}`} render={(props)=><AddMail loadLists={this.getTelLists} {...props}/>}/>
</div>
}