react中 路由跳转传参方式
在React中,通常有以下几种方式来进行路由跳转时传递参数:
1. 使用URL参数:可以在路由路径中使用`/:参数名`来定义参数,然后在跳转时可以通过`<Link>`或`history.push`方法来传递参数。例如:
javascript
定义路由
<Route path="/user/:id" component={User} />
跳转并传递参数
<Link to={`/user/{userId}`}>用户详情</Link>
在目标组件中可以通过`this.props.match.params.id`来获取传递的参数。
2. 使用查询参数:可以使用`<Link>`的`to`属性或`history.push`方法中的`search`参数来传递查
询参数。例如:
javascript
跳转并传递查询参数
<Link to={{ pathname: '/user', search: `?id={userId}` }}>用户详情</Link>
在目标组件中可以通过`this.props.location.search`来获取传递的查询参数。
3. 使用状态参数:可以使用`<Link>`的`to`属性或`history.push`方法中的`state`参数来传递状态参数。例如:
javascript
跳转并传递状态参数
<Link to={{ pathname: '/user', state: { id: userId } }}>用户详情</Link>
在目标组件中可以通过`this.props.location.state.id`来获取传递的状态参数。
需要注意的是,使用URL参数和查询参数时,参数会出现在URL中,可能会暴露给用户或保存在浏览器的历史记录中。而使用状态参数,则会将参数保存在React Router的状态中,不会出现在URL中,适用于敏感信息或较大的数据传递。
react router 6