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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。