React browserHistory.push（）传参

最新推荐文章于 2025-07-07 08:54:19 发布

原创最新推荐文章于 2025-07-07 08:54:19 发布 · 1.9w 阅读

5 ·

CC 4.0 BY-SA版权

JS框架应用专栏收录该内容

39 篇文章

订阅专栏

博客介绍了页面跳转传参的两种方式。一是类似url传值，可通过this.props.location.query截取参数，也能用传统window.location.href获取url后处理；二是用state传参，更加优雅，参数不会显示在地址栏，类似post传值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 相当于url传值，在跳转页面 this.props.location.query就可以截取到参数类似下图，当然也可以用传统的window.location.href去获取url然后在split去截取参数，再去处理。

browserHistory.push(`/m/saas/regional/team/edit?id=${record.id}`);

2. 用state去传参，就可以更加优雅，传的参数不会显示在地址栏，可以理解为类似post传值。在跳转页面可以用

this.props.location.state 去接受

browserHistory.push({

pathname: '/m/saas/tax/everyday',

state: { objData },

});

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

哇偶哇偶Z

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端面试汇总-React

分享前端工程化、动效魔法与性能之舞！

06-29

1412

React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event

React

m0_70931003的博客

09-27

146

官网React中文官网:React 官方中文文档介绍描述用于动态构建用户界面的JavaScript 库(只关注于视图)由Facebook开源React的特点声明式编码组件化编码React Native 编写原生应用高效（优秀的Diffing算法）React高效的原因使用虚拟(virtual)DOM,不总是直接操作页面真实DOM。DOM Diffing算法, 最小化页面重绘。执行了ReactDOM.render(.......之后。

2 条评论您还未登录，请先登录后发表或查看评论

React history.push 传递参数

最新发布

bemyrunningdog

07-07

508

以下是 Umi 中。

React browserHistory.push时如何优雅地传参

Lambert0320的博客

04-07

1万+

传参方式1：将参数直接写在路径中，前提是router定义时，需要指定参数的名字，这里假定为:value;browserHistory.push(pathname: '/routerName/123');如何获取到123呢？通过this.props.params.value即可获取传参方式2：通过state传参，可以在页面跳转时，url中不显示参数； browserHistory

React获取通过history.push中的state传递参数，并在新页面获取到state里面的数据

JulyNight的博客

02-02

1434

【代码】React获取通过history.push中的state传递参数，并在新页面获取到state里面的数据。

react 函数式组件使用history.push的第二个参数完成路由传值的方法，此方法可类似于post传值，不在地址上显示。实现更优雅的传值

LuckDD的博客

09-14

4503

history.push(`自己的地址`, {standard:standardType}); 第二个参数为自己需要传递的值，以键值对的方式传递接受： const history = useHistory();//声明 const standardType = history.location.state.standard;//可获取到上面传递的值。次方法传递参数可避免参数中有/ / / 特殊字符带来的路径不对的坑。而且隐藏了需要传递的值，安全性更高。 ...

react笔记_10react路由

qq_43260366的博客

12-22

1318

在注册路由时如下：可能有两个甚至多个的路由注册,通过下面代码注册路由当path变为/home时路由出口的位置展示哪个组件-- Home组件orTest组件or两个都展示？以上是注册的几个路由，但是一进入页面时，匹配不到任何的路由，此时若是我们想进入页面(url为空)时默认展示home组件的内容，可以使用路由重定向。在App.vue(跟组件)注册了 Home路由和About路由，在Home组件注册了 Sun1和Sun2 两个子路由。以下就注册了一个 Home 组件，组件路径为/home。

react中（父子/祖先/路由）数据和事件的通信方法总结

123的博客

11-27

2426

好久没更博了啊，0.0，最近手头的一个前端控制台项目，我是用阿里开源的ant框架搭建的，用着还是蛮顺手了，在使用过程中，碰到一些数据通信的问题，有些和vue相同，有些不一样的地方还是踩了些坑的，特地整理了下。 1.子组件调用父级的数据和方法父级组件代码如下，把数据和方法通过props向下传递，在子组件中调用this.props.text即可获得父级数据，调用this.props.checkb...

从零手写react-router

helloworld1024fd的博客

10-13

401

蛮多同学可能会觉得很复杂, 说用都还没用明白, 还从0实现一个, 其实router并不复杂哈, 甚至说你看了这篇博客以后, 你都会觉得router的核心原理也就那么回事至于帮助我们实现了什么东西我就不过多阐述了, 这个直接移步官方文档, 我们下面直接聊实现另外:源码有依赖两个库和history, 所以我这里也就直接引入这两个库了,虽然下面我都会讲到基本使用, 但是同学有时间的话还是可以阅读以下官方文档routerhookshookshooksreacthookmatchhistoryRouter。

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

AS_TS的博客

09-18

8446

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-a

react+umi页面间传递数据（history.push）

sheep_yyx的博客

07-11

2873

react+umi页面间传递数据

browserhistory java,browserHistory.push无法导航到新页面

weixin_39939993的博客

04-01

252

我在路由器上设置了browserHistory(react-router 2.0)：import { browserHistory } from 'react-router'function requireAuth(nextState, replace) {if (!services.auth.loggedIn()) {replace({pathname: '/login',state: { ne...

React路由跳转与传参

wdquan19851029的专栏

08-20

2198

路由跳转功能由React Router提供，需要先理解history，history是为React Router提供核心功能的包，能轻松地在客户端为项目添加基于location的导航，这种功能对于单页应用至关重要。安装依赖： npm install --save history 存在三类history，分别是browser，hash，与 memory。history包提供每种history的创建方法。 1.首先定义history: 无论创建哪种history，最终都会得到一个几乎拥有相同属性

React Hooks的history带参数跳转，并获取参数

tianbiancai1的博客

08-31

3539

跳转页面带参数 history.push({ pathname: "/admin/test", query:{ id: user_id, name: user_name } }); 跳转后获取参数 const { query = {} } = props; console.log(query.name);

React 跳转页面传递传递参数，并获取参数

B13362260109的博客

07-19

848

【代码】React 跳转页面传递传递参数，并获取参数。

react路由传参的几种方式

jstljspservlet的博客

08-10

872

react路由传参的几种方式

python的django框架http请求_python的Web框架，Django框架中的请求与响应

weixin_39639550的博客

11-28

239

请求与响应简单流程图我们先来了解一个请求与响应的大概流程视图函数接受到的request到底是个什么对象呢?服务器接收到http协议的请求后，会根据报文创建HttpRequest对象视图函数的第一个参数是HttpRequest对象在django.http模块中定义了HttpRequest对象的API，下面我们来列出这个对象的方法。request属性说明path一个字符串，表示请求页面的完整路径，不包...

react 阻止history.push 刷新页面

03-30

React 中可以使用 `history.pushState()` 方法来实现阻止 `history.push()` 刷新页面。具体步骤如下： 1. 在组件的 `constructor` 方法中，创建一个全局变量 `locationState`，用于保存当前页面的状态。 ``` constructor(props) { super(props); this.locationState = {}; } ``` 2. 在 `componentDidMount` 方法中，将当前页面的状态保存到 `locationState` 变量中。 ``` componentDidMount() { this.locationState = window.history.state; } ``` 3. 在需要跳转页面的事件处理函数中，使用 `history.pushState()` 方法来实现跳转，并将当前页面的状态保存到 `locationState` 变量中。 ``` handleClick = () => { const newState = { foo: 'bar' }; // 新状态 window.history.pushState(newState, '', '/new-url'); // 跳转到新页面 this.locationState = newState; // 保存新状态 } ``` 4. 在组件的 `componentWillReceiveProps` 方法中，判断当前页面的状态是否与 `locationState` 变量中保存的状态相同，如果相同，则说明页面没有刷新，否则说明页面已经刷新，需要重新渲染组件。 ``` componentWillReceiveProps(nextProps) { const { location } = this.props; const nextLocation = nextProps.location; if (nextLocation !== location) { const nextState = window.history.state; if (nextState === this.locationState) { // 页面没有刷新，不需要重新渲染组件 return; } // 页面已经刷新，重新渲染组件 this.locationState = nextState; this.setState({}); // 强制重新渲染组件 } } ``` 通过以上步骤，就可以实现阻止 `history.push()` 刷新页面的效果了。