一、params传参
- 刷新页面后参数不消失
- 参数会在地址栏显示
- 需要在Route中配置参数名称
//Router.js
{
path: '/admin/userInfoEdit/:userId',//编辑用户
component: UserInfoEdit,
title:"用户信息",
icon:"UserOutlined",
isShow:true
},
(1)传递单个参数:
<Route path="/admin/userInfoEdit/:11" component={userInfoEdit} />
<Link to={'/admin/userInfoEdit/'+ '105'}>跳转</Link>
<Link to={{pathname: '/admin/userInfoEdit/' + '11'}}>跳转</Link>
js方式
this.props.history.push({
pathname:`/admin/userInfoEdit/${userId}`
});
接收方式:this.props.match.params.userId
(2)传递多个参数:
<Route path='/admin/userInfoEdit/:userId/:userName' component={userInfoEdit}></Route>
state = {
userId: 120,
userName: '11'
}
<Link to={{pathname:`/admin/userInfoEdit/${this.state.userId}/${this.state.userName}`}}>跳转</Link>
使用js方式
this.props.history.push({pathname:`/admin/userInfoEdit/${this.state.userId}/${this.state.userName}`});
二、query传参
- 刷新页面后参数消失
- 参数不会在地址栏显示
<Route path='/admin/userInfoEdit' component={userInfoEdit}></Route>
<Link to={{pathname:'/admin/userInfoEdit',query:{userId:120,userName:'ll'}}}>跳转</Link>
使用js传参
this.props.history.push({
path:'/admin/userInfoEdit',
query: {
userId: userId,
},
});
获取参数:
this.props.match.query.userId
三、state传参
- 刷新页面后参数不消失
- 参数不会在地址栏显示
- 路由页面(无需配置)
this.props.history.push({
pathname:'/admin/userInfoEdit',
state: {
userId: userId,
},
});
获取参数:
this.props.location.state.userId