this.props.history.push 传参数 url、state 混合传参

最新推荐文章于 2023-02-02 13:30:27 发布
原创 最新推荐文章于 2023-02-02 13:30:27 发布 · 8.5k 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了在React应用中如何通过URL、State以及混合方式在不同组件间传递参数的方法。包括基本的URL传参，适用于ID等简单信息的传递；State传参，则适合于需要传递较复杂数据的情况；最后还介绍了结合两者优点的混合传参方式。
1. url 传参

一般跳转传递 id 都放入 url 中

this.props.history.push(`/document-analysis/fans-list?id=${this.state.bloggerId}`)

地址栏显示

在这里插入图片描述
在跳转接收页 this.props.location 打印的路由参数

在这里插入图片描述

2. state 传参

跳转时需要带其他较多数据，无法在 url 上携带，可以使用 state 传值

this.props.history.push({ 
	pathname: `/document-analysis/concern-list`, 
	state:this.state.bloggerId 
})

地址栏显示

在这里插入图片描述
在跳转接收页 this.props.location 打印的路由参数

在这里插入图片描述

3. url、state 混合传参

当有 id 要在 url 中显示，又有较多其他数据携带时，可以使用混合传参

this.props.history.push({ 
	pathname: `/document-analysis/concern-list`, 
	search: this.state.bloggerId, 
	state:this.state.bloggerId 
})

地址栏显示
在这里插入图片描述
在跳转接收页 this.props.location 打印的路由参数

在这里插入图片描述
search 属性会在 pathname 属性填写的路径后默认补 一个问号？，需要显示在地址栏的信息可以写在 search 属性中

this.props.history.push({ 
	pathname: `/document-analysis/concern-list`, 
	search: `id=${this.state.bloggerId}`, 
	state:this.state.bloggerId 
})

地址栏显示

在这里插入图片描述
在跳转接收页 this.props.location 打印的路由参数

在这里插入图片描述

this.props.history.push传值
读心悦
11-26 2万+
react路由设置中，除了标签以外，还有一个this.props.history.push，设置落雨跳转和传值： 第一种方式：在父组件中，设置路由标签： <Link to="/about/:id">About</Link> 第二种方式：在父组件中，设置点击事件： <div onClick={this.click.bind(this)}>About</di...
react（47）——通过调用this.props.history的方法来实现路由的Link组件功能，使用withRoute将非路由组件变为路由组件
木子 旭的博客
03-21 2306
1.this.props.history.push方法 this.props.history.push()该方法中的参数为Link组件的to属性，也可以传递state； this.props.history.push(`/Page2/Div1`) //等同于 <Link to=`/Page2/Div1`></Link> this.props.history.push(`/Page2/Div1`,{ id: 1, message: "你好啊" }) //等同于 &lt
在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】
m0_61083409的博客
03-02 661
react-router-dom 编程式路由导航 (v5) 1.push跳转+携带params参数 props.history.push(`/b/child1/${id}/${title}`); 2.push跳转+携带search参数 props.history.push(`/b/child1?id=${id}&title=${title}`); 3.push跳转+携带state参数 props.history.push(`/b/child1`, { id, title }); 4.repl
React history.push 传递参数
热门推荐
datouniao1的博客
12-14 2万+
react 组件之间跳转传递参数，在push的时候设置state 属性，然后再目标组件的props 中能够对传过来的参数进行接收
如何this.props.history.push传参数
wgs_1111的博客
09-27 1万+
从A页面跳转到B页面 第一种： A页面 传参数 this.props.history.push{ pathname:’/router/url/send’, query:{ “oneFlag”:one, … } } B页面 接收参数 this.props.location.query.oneFlag // one … 路由路径显示：‘#/router/url/send/oneFlag?one’ 第...
this.props.history的具体使用方法
05-25
this.props.history 是 React Router 提供的一个对象，它提供了一些方法来帮助我们在组件之间进行导航。 常用的方法有： 1. push(path, [state])：跳转到新的路由，并将新的路由添加到历史记录中； 2. replace...
react路由组件传参三种方式使用
qq_60976312的博客
07-01 809
react路由组件传参三种方式使用
this.$router.push携带的参数怎么获取
最新发布
08-15
return this.$store.state.detailData } } } ``` ## 4. 使用路由导航守卫获取参数 ### 全局前置守卫 ```javascript // router/index.js router.beforeEach((to, from, next) => { if (to.name === 'DetailPage...
this.props.histroy.push中 state 传参问题
miaomiao_1024的博客
05-18 1637
问题描述 【hash路由】利用this.props.history.push() 在发起路由跳转时，将参数赋值给state传参。 【写法如下】 this.props.history.push({ pathname: '/noAccess', state: { name: "lmm"}， search: "name" }); 在 /noAccess 页面下获取参数 const { location: { state = {}, search = "" } } = this.props console.log
react使用link跳转传递参数_React-Typescript之路由跳转（使用this.props.history.push)
weixin_39928787的博客
11-25 1082
接上篇：问题：如果使用 this.props.history.push('/searchs') ，它是有问题的，导致不能跳转，因为没有props，需要使用withRouter为这个对象添加history这个对象方可使用这个问题的解决方案就是：/* * 创建时间： 2019-09-19 14:42 * 作者：南宫伯赏 * 功能： 针对搜索功能的NavBar * */ import * as Reac...
react 函数式组件 使用history.push的第二个参数完成路由传值的方法，此方法可类似于post传值，不在地址上显示。实现更优雅的传值
LuckDD的博客
09-14 4538
history.push(`自己的地址`, {standard:standardType}); 第二个参数为自己需要传递的值，以键值对的方式传递 接受： const history = useHistory();//声明 const standardType = history.location.state.standard;//可获取到上面传递的值。 次方法传递参数可避免参数中有/ / / 特殊字符带来的路径不对的坑。而且隐藏了需要传递的值，安全性更高。 ...
React的this.props.history.push() 报错解决方案
weixin_44205155的博客
11-03 3989
【问题】在使用React 库实现路由跳转时，出现了 cannot read property ‘push’ of undefined 【场景】左侧管理系统的菜单栏与右侧内容区域的联动。可以延伸到多种应用场景。 【解决方案】 1 使用withRouter 1.1 项目安装 react-router-dom cnpm install react-router-dom --save-dev 1.2 引入高阶组件withRouter 在使用的组件中引用高阶组件 withRouter import React fr
this.props.history填坑
weixin_43905830的博客
09-29 3119
项目场景： this.props.history填坑 问题描述： 今天在写路由跳转的时候发现当我点击跳转按钮时地址栏可以跳转到/我想要的路由下,但是组件加载不出来但是刷新后就可以了!可以正常加载 | |； 原因分析： 1、首先我们要知道对于子组件他是获取不到this.props.history这个方法的 2、第一点解决后还有个坑，对于子组件是不能通过this.props.history跳转到父组件的 下面我们通过实例来演示并解决 解决方案： 1、怎么让子组件可以使用this.props.history这个
this.props.history.push报错Uncaught TypeError: Cannot read property 'push' of undefined
github_38928905的博客
04-22 5692
情况：在app中引入了一个footerNav组件（路由也都引入了），然后在footerNav中点击按钮跳转，结果报错： Uncaught TypeError: Cannot read property 'push' of undefined 解决： 方式1 通过propTypes将父组件app对象传入子组件footerNav import PropTypes from 'prop...
React获取通过history.push中的state传递参数，并在新页面获取到state里面的数据
JulyNight的博客
02-02 1495
【代码】React获取通过history.push中的state传递参数，并在新页面获取到state里面的数据。
React browserHistory.push（）传参
ddwddw4的博客
07-10 1万+
1. 相当于url传值，在跳转页面this.props.location.query就可以截取到参数类似下图，当然也可以用传统的window.location.href去获取url然后在split去截取参数，再去处理。 browserHistory.push(`/m/saas/regional/team/edit?id=${record.id}`); 2. 用state去传参，就可以...
this.props.history.push报错push undefined
qq_41820599的博客
12-13 1774
由于父组件没有传给子组件history的值，所以会报错 方法1：父组件加上history={this.props.history}（我用没好使） 方法2：子组件import { withRouter } from ‘react-router’ export default withRouter(Index)
this.props.history.listen路由监听与取消监听
见贤思齐焉，见不贤内自省
02-21 2781
this.props.history.listen路由监听与取消监听
React browserHistory.push时如何优雅地传参
Lambert0320的博客
04-07 1万+
传参方式1： 将参数直接写在路径中，前提是router定义时，需要指定参数的名字，这里假定为:value;browserHistory.push(pathname: '/routerName/123');如何获取到123呢？通过this.props.params.value即可获取 传参方式2： 通过state传参，可以在页面跳转时，url中不显示参数； browserHistory
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值