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

最新推荐文章于 2024-03-28 10:47:03 发布

原创最新推荐文章于 2024-03-28 10:47:03 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

在React应用中，使用`history.push`方法可以实现页面跳转，并传递状态数据。例如，将`param`值为我是需要传递的参数通过state属性添加到路径/july/detail中。然后，在目标组件中，可以通过`this.props.history.location.state`获取传递的参数。

demo如下：

跳转

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

获取：

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

OnwardAndUpward

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

React 路由跳转携带params、search、state参数，以及编程式路由导航

weixin_60463255的博客

11-27

1569

实现效果——点击展台1、展台2、展台3时，会显示同一个名为Detail路由组件，但是组件接收的值会不一样：文件目录： Message>index.jsx: import React, { Component } from 'react' import { Link, Route } from 'react-router-dom' import Detail from './Detail'; export default class Message extends Co...

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 history.push 传递参数

热门推荐

datouniao1的博客

12-14

2万+

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

React Router 如何使用history跳转

qq_34153210的博客

05-20

1万+

react 路由

react路由传参的几种方式

jstljspservlet的博客

08-10

895

react路由传参的几种方式

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

LuckDD的博客

09-14

4537

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

随笔——history跳转页面后，获取参数

weixin_44268707的博客

12-16

2747

跳转页面通过 history.push({ pathname: '/intent/handle/ProcessIntentOrder', query: { id: record.id, checkFlag: false } }); // 到跳转页面后 const { query = {} } = props.location; console.log(query.checkFlag, '查看还是处理'); // 获取到的会是一个字符串false，所以最好记得是将checkFlag:

react 阻止history.push 刷新页面

03-30

3. 在需要跳转页面的事件处理函数中，使用 `history.pushState()` 方法来实现跳转，并将当前页面的状态保存到 `locationState` 变量中。 ``` handleClick = () => { const newState = { foo: 'bar' }; // 新状态 ...

深入解析history.pushState实现无刷新页面跳转

本文将围绕标题“history.pushState详解[项目代码]”及描述内容，深入剖析 `history.pushState` 的核心机制、参数含义、典型应用场景、配套事件处理方式以及开发实践中必须注意的关键问题。首先，`history.push...

使用 history.pushState() 和 replaceState() 是否会影响 history.go() 的效果？

最新发布

03-20

- **`state` 对象传递**：可以通过 `pushState()` 的 `state` 参数存储数据，后续在 `popstate` 事件中通过 `event.state` 读取： ```javascript history.pushState({ page: "settings" }, "", "/settings"); ...

react使用hashHistory实现类似get方法带参数跳转

01-08

主页router 前一页引入hashHistory import { HashRouter } from 'react-router-dom'; 传参： btnClick() { hashHistory.push({ pathname: '/apartmentReserve/'+yourApartmentId, query: { name:yourApartmentname, price:yourApartmentprice }, }) } 或者通过to 传参：点击跳转

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 传参数 url、state 混合传参

AS_TS的博客

09-18

8524

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 Hooks的history带参数跳转，并获取参数

tianbiancai1的博客

08-31

3570

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

如何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’ 第...

History：pushState() 方法

日暮斜阳

03-28

3351

在HTML文档中，方法向浏览器的会话历史栈增加了一个条目。该方法是异步的。为 popstate 事件增加监听器，以确定导航何时完成。state 参数将在其中可用。

react路由的history跳转携带参数

qq_40862118的博客

05-14

1万+

关于react路由的history跳转 1、跳转时携带参数： this.props.history.push({ pathname:"/admin/reply", params:{ id:e.id } }) 2、在跳转后的页面获取参数： this.props.location.params.id

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

znhyXYG的博客

03-20

2703

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

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

sheep_yyx的博客

07-11

2923

react+umi页面间传递数据