react如何获取路由,以及如何进行路由跳转并传参,以及接收
程序员文章站
2022-03-04 10:45:32
...
1.获取路由 this.props.location.pathname
2.进行路由跳转 this.props.history.push({pathname :"/meet"})
3.获取动态路由参数 this.props.match.params.users
路由传参 this.props.history.push({pathname :"/device/list",query:{data:item})
接收路由传过去的参数 const {data}=this.props.location.query;、
具体实现router.js定义
<Router>
<Route exact path="/" component={Login} />
<Route path="/register" component={Register} />
<Route path="/forget" component={Forget} />
<Route path="/full:type:phoneno" component={Full} />
<Route path="/gen_main:id" component={Gen_Main} />
<Route path="/service:id" component={Service} />
<Route path="/adn_main:id" component={Adn_Main} />
<Route path="/adn_list:id" component={Adn_List} />
<Route path="/order_info:id" component={OrderInfo} />
<Route path="/order_detil" component={OrderDetil} />
<Route path="/cate_rule" component={CateRule} />
<Route path="/grade_shop:id" component={GradeShop} />
<Route path="/heart_act:id" component={HeartAct} />
<Route path="/all_shop:id" component={AllShop} />
<Route path="/new_shop:id" component={NewShop} />
<Route path="/cen_shop:id" component={CenShop} />
<Route path="/user_info:id" component={UserInfo} />
</Router>
跳转
if(parseInt(calb.type) === 1){
this.props.history.push('/gen_main'+id);
}else{
this.props.history.push('/adn_main'+id);
}
/*也可以将参数封装到一个data里面*/
获取参数
const userid = this.props.match.params.id;
上一篇: react中使用js的方式进行路由跳转
下一篇: VUE3.0使用组合api进行路由跳转