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

最新推荐文章于 2024-02-27 15:26:01 发布

OnwardAndUpward

最新推荐文章于 2024-02-27 15:26:01 发布

阅读量998

点赞数

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/JulyNight/article/details/128848671

版权

demo如下：

跳转

history.push({pathname:'/july/detail',state:{param:'我是需要传递的参数'}});

获取：

const { param } = this.props.history.location.state;
console.log(param)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

OnwardAndUpward

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React获取通过history.push中的state传递参数，并在新页面获取到state里面的数据

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

扫一扫

18 React 渲染数据注意事项、以及react-router4.x中使用js跳转路由

03-01

1. **History对象**：通过注入的`history`对象，可以使用`push`、`replace`方法进行页面跳转，例如`history.push('/some/path')`。 2. **Route Component的props**：在路由组件中，`this.props.history`可以直接...

关于react-router/react-router-dom v4 history不能访问问题的解决

11-28

在升级到`react-router-dom` v4后，开发者可能会遇到在子组件中通过`this.props.history`无法获取到`history`对象的情况。这是因为v4版本引入了一些变化，特别是对于如何在组件中使用`history`进行了调整。传统上，`...

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

Vue Router 第二章路由传参

匠工

07-18

200

route 传参方法

React history.push 传递参数

热门推荐

datouniao1的博客

12-14

2万+

react 组件之间跳转传递参数，在push的时候设置state 属性，然后再目标组件的props 中能够对传过来的参数进行接收

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

sheep_yyx的博客

07-11

2652

react+umi页面间传递数据

React Router中pushState的使用方法

沈斯明技术博客

03-08

7487

带参数页面跳转 [javascript] view plain copy this.props.history.pushState({passParam: true}, "/targetURL"); 第一个参数为你页面跳转时，需要传递的参数，如果不需要传参数，则为null。第二个参数为跳转目标页面。

React Router 如何使用history跳转

qq_34153210的博客

05-20

1万+

react 路由

this.props.histroy.push中 state 传参问题

miaomiao_1024的博客

05-18

1406

问题描述【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

如何获取当前页面上一页的URL？

04-04

在网页开发中，有时我们需要获取用户访问历史中的上一个页面URL，这在实现某些功能时非常有用，例如返回按钮、数据分析或个性化用户体验。在HTML5和JavaScript的环境中，我们可以使用`document.referrer`属性来获取...

前端项目-history.zip

09-02

4. **数据同步**：当使用`pushState()`或`replaceState()`更改URL时，通常需要同步相关数据，确保页面状态与新的URL相匹配。这可能涉及到使用存储（如localStorage或sessionStorage）或服务端的API调用来获取或更新...

react路由传参的几种方式

jstljspservlet的博客

08-10

715

react路由传参的几种方式

umi+react开发中，使用history.push中的state传参，接收参数的页面在项目部署到服务器后，刷新页面参数丢失报错怎么办？

znhyXYG的博客

03-20

2172

umi+react开发中，使用history.push中的state传参，接收参数的页面在项目部署到服务器后，刷新页面参数丢失报错怎么办？

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

B13362260109的博客

07-19

714

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

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

tianbiancai1的博客

08-31

3305

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

3.html5历史管理 (history.pushState)

YuhNagi的博客

10-31

646

hash，html5 history历史管理

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去传参，就可以...

react 路由的基本原理及实现

最新发布

qq_21087199的博客

02-27

969

该事件会在调用浏览器的前进，后退以及在执行history.forward,history.back 和history.go 的时候触发。

history.pushstate用法详解

聚娃科技开发者博客

12-14

1031

通过本文，我们详细了解了的用法以及在实际项目中的应用场景。希望这些知识能够帮助你更好地处理前端页面的状态管理，提升用户体验。

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()` 刷新页面的效果了。