this.props.location.state刷新为undefined

最新推荐文章于 2023-07-28 15:18:58 发布

嚣张.miner

最新推荐文章于 2023-07-28 15:18:58 发布

阅读量6k

点赞数 1

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/zm_miner/article/details/105245757

版权

在React应用中，从a页面跳转到b页面并使用state传递参数，当在b页面刷新时，`this.props.location.state`变为undefined。问题源于使用了HashRouter，而BrowserRouter则不会出现此问题。可通过sessionStorage作为替代方案，将对象转换为JSON字符串进行存储和接收，以确保刷新后数据仍然可用。

摘要由CSDN通过智能技术生成

a页面跳转到b页面, 通过state传参

a页面

 this.props.history.push({
      pathname: `/chunan-my-declare-detail`,
      state: {
        record,
        takenCount: record.takenCount,
        takenTicketTime: record.takenTicketTime,
        policyCode: this.state.policyCode,
        legalPersonName: this.state.farenData.legalPersonName,
        legalPersonPhone: this.state.farenData.legalPersonPhone,
      }
    });

b页面接收
this.props.location.state

在这里插入图片描述

当我刷新当前页面时 this.props,location.state为undefined
在这里插入图片描述

???

查了一下发现,是使用 HashRouter的原因, 如果是BrowserRouter就不会出现这个问题,这两个各有各的优势和劣势具体没去了解

另一种解决方式使用 sessionStorage

 const { location } = this.props
    let takenTicketTime = '

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

嚣张.miner

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

react 路由详细讲解(1)

s_y_f_的博客

07-30

800

介绍: 今天学习了react的重点知识路由,这个知识点是react中的一大块,大家有兴趣的话可以跟随作者的文章继续学习呦 SPA的理解单页Web应用（single page web application，SPA）。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面，只会做页面的局部更新。数据都需要通过ajax请求获取, 并在前端异步展现。路由的理解 ① 什么是路由? 一个路由就是一个映射关系(key:value) key为路径, value可能是function或component ② 路

redux-location-state:用于在URL中读取和写入Redux存储状态的实用程序

05-17

还原位置状态用于在URL中读取和写入Redux存储状态的实用程序。有关此程序包存在的用例和原因，请阅读博客文章： : 发展状况 2.0已更新以发布React Router V4 这个怎么运作在撰写之前进行设置基本思想是，您传递一个配置对象，并根据状态何时更新来执行某些查询参数，并且如果用户返回或前进，则根据查询参数来更新状态。例如 { p : { stateKey : 'foo' , initialState : 'bazz' , options : { shouldPush : true } } , } 将使p的查询参数等于通过foo上的值传递的状态配置首先，您需要创建一个配置对象 const paramSetup = { '/' : { p : { stateKey : 'foo' , initialState : 'bazz' , op

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

前端路由（七）-编程式导航——通过js方法实现路由跳转 & 获取编程式导航传递的参数-props.location.state & 如果组件不是路由组件-必须使用withRouter包裹原始的组件

weixin_44867717的博客

02-15

598

编程式导航——通过js方法实现路由跳转 & 获取编程式导航传递的参数-props.location.state & 如果组件不是路由组件-必须使用withRouter包裹原始的组件通过js动态控制路由跳转导入withRouter import { withRouter } from "react-router-dom"; 导出时使用withRouter包裹组件 export default withRouter(Login); 被包裹的组件中可以通过props获取his

【react+ts】react项目中this.props找不到location方法

我的开源项目:https://gitee.com/derekgo/vue-cms_xg

01-26

2090

问题描述我想想在react+ts项目中获取本地信息，所以就是用了this.props.location.pathname但是报错说找不到location，我特喵的就很纳闷解决流程 1.先使用react-router-dom中的withRouter函数包住当前类组件 import {withRouter} from "react-router-dom"; class ReservationList extends Component<InitProps, InitState>{ render

react中this.props 里面location丢失的问题

热门推荐

qq_39047764的博客

07-06

1万+

1：在上及传下来的的时候根本就没有传过来--本来不该传就有的，但是没有，只能再传一次，确实能传下来this.props.local.history.push('/city') 可以跳转，原本是没有loacl的，直接props的；第二种解决方法：在找不到props里面的地址的时候，使用withRouter 可以找到了2：很奇怪的是，在这个时候刷新是没问题的，应该是往后台转接口的时候出的问题；转...

react路由react-router-dom路由跳转传参设置state无效，接收时state为undefined问题分析

lingliu0824的博客

06-30

4500

最近的一个需求：需要从A路由页面（"/view/personal/user"）携带一数组对象到B路由页面("/view/sysMng/user")，从而设置B页面的初始值。最初想到的方法就是通过路由传参在A页面路由跳转时将数据放入state中，然后在B页面的componentDidMount生命周期函数中通过props.location.state接收 //A页面执行editRole方法进行路由跳转并携带state数据 private editRole = row => { this.pr

constructor(props) { super(props); const detailSaveData = sessionStorageUtil.read('detailSaveData'); this.state = { indocno: this.props.location.state.indocno, type: this.props.location.state.type, selectedTab: detailSaveData ? detailSaveData.selectedTab : 0, data: {}, pathname: window.location.pathname, visibleModal: false, time: new Date(), } } 设置this.props.location.state.indocno为undfind时indocno为“”

05-24

可以在 constructor 中添加一个判断语句，来避免出现 undefined 的情况，示例如下： ``` constructor(props) { ...这样当 `this.props.location.state.indocno` 为 undefined 时，就会将 `indocno` 设置为空字符串。

react 向路由组件传递参数的三种方式

weixin_44607531的博客

02-22

1912

路由的基本使用 let obj = {id:'001', name='gailun'} <Link to={`/home/${obj.id}/${obj.name}`}>{obj.name}</Link> <Route path='home/:id/:name' component={Home}/>

路由页面跳转以及传值

qq_41988113的博客

07-06

1140

实现页面的跳转和传值一、react-router@51、功能实现在首页有三个卡片，分别对应子页面不同状态数据的数量（任务数量、等待发布任务、已发布任务），实现以下交互：（1）点击对应任务数量，打开跳转到消息发布任务页面。（2）点击等待发布任务时：发布状态选项自动选择等待发布。（3）点击已发布任务时：发布状态选项自动选择已发布。这里用到一个方法，可以直接通过切换key值改变options中得value值在子页面中打印props得值...........

清除props.location.state

weixin_45481456的博客

02-17

874

/**方法一：清除props.location.state*/ window.history.replaceState({}, document.title); /**方法二：清除props.location.state */ props.history.replace({ ...props.location, state: undefined, });

如何理解react-router官网写的“history is mutable”？this.props.location与this.props.history.location有什么区别？

zrq1210的博客

10-20

1881

我当前的地址是 http://localhost:8002/myproject#/myurl 当我执行跳转： this.props.history.push({ pathname: '/myurl', search:'id=1', state: { fromSource: 1 }, }); 该路由对应的组件是这样的： class MyUrl extends React.Component { componentWillReceiveProps(nextProps) {

react通过history.location.state来携带参数

m0_60823684的博客

11-20

4304

一.state格式 history.push(path, [state]) <Redirect to={{pathname: '/xxx', state: {} }} 二.实际操作 1.用history.push方法携带state参数 history.push('/login', { from: history.location.pathname }) 2.用Redirect里的to属性携带state参数 <Redirect to={{pathname: '/login',s

关于react的props的使用

qq_43505774的博客

05-15

323

props属性的使用有几个地方会出现第一个是函数组件传参的时候第二个是类组件传参的时候第三个是路由组件跳转的时候函数组件 function All(props){ console.log(props) return ( <div>123{props.name}</div> ) } 类组件 class Hello extends React.Component { constructor(props){ super(pr

React 的路由传参

用心创作每一篇文章

03-29

1112

当子组件中无法拿到props时，我们通常使用withRouter()方法进行包裹，将返回值赋予一个新变量，这个变量就是我们包裹完的新组件将这个组件替换原来的组件就可以就。HashRouter这个是hash模式，带#号的，如果不想使用#，我们可以将HashRouter换为BrowserRouter就可以了。正常我们创建路由都是。

React router(V6)随手笔记.二

fang_my的博客

04-06

971

一 .换成自己独有的地址栏信息在地址栏里我们经常可以看到公司的名称或者当前页面的大概内容，其实我们也可以修改地址栏里的路径信息，很简单，在<Link>标签里的to属性里设置就可以二.需要注意的点我们需要注意的是，webpack会把react脚手架下名字叫做public的文件夹当成根目录，也就是说localhost:3000 其实就是public这个文件夹，（你可以暂时这样理解）我这里在public文件夹下写了一个样式。简单的就是body{background-color:gree

ReactRouterv5在BrowserRouter和HashRouter模式下对location.state的支持