React router路由之手动刷新参数丢失?

最新推荐文章于 2025-05-20 09:38:52 发布
最新推荐文章于 2025-05-20 09:38:52 发布
阅读量2.5k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5bd02c7be51d4527001383cf
探讨了在项目中更新URL结构，从显示ID到不显示ID的方式，使用Link组件和props.router.push进行页面跳转时，手动刷新页面后无法获取到state参数的问题。寻求解决方案以保持刷新后参数的有效性。

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

项目原来的配置是/project/:companyId/:projectId 这种方式跳转。

现在产品经理意思url上太多ID不好看，去掉URL上的id 所以，我现在做的是/project

‘<Link to={{ pathname : ' /sort ' , state : { companyId : ${companyId}, projectId: ${projectId}}}}>’

this.props.router.push({ pathname : '/sort' ,state : { companyId : ${companyId}, projectId: ${projectId}}}} })

const {companyId, projectId} = this.props.location.state 页面参数都可以传递

但是遇到的问题是，手动刷新页面后

this.props.location.state 的value是undefined，求大佬们指教，怎么样才能刷新后获取到参数

如何解决vue/react打包上线之后路由页面刷新就丢失的问题
Debug的博客
07-26 1321
location /{ try_files $uri /index.html; index index.html index.htm index.php; } 通过服务器的nginx配置进行url重写到程序入口index.html,代码如上
react-router-dom的使用；react 路由实现的基本原理 和 浅谈前后端路由
FOR 的博客
09-01 618
react 路由学了好久，断断续续的，也开学了。忙这忙那。 呼呼 。终于学完这一章节了 内容有点多，5.1 的相关知识只是浅谈，需要深入了解可以找找其他博文。如果这里有不对请指正啦。 第五章 — react-router 5.1 相关知识 1. 浅谈网页发展 1.1后端渲染阶段 早期网页 早期网页是由 jsp/php 代码开发，基本是html和css 它的请求过程是输入网站后，发送到服务器，服务器会将完整的网页返回，也就是已经渲染完成的网页，包括一些图片资源等。 这个也就是后端渲染，即请求回来的即使渲染.
react路由参数跳转后再刷新页面，参数丢失
buling_bulink的博客
05-10 2554
react路由参数跳转后再刷新页面，参数丢失 在学习ant Pro前端框架时，遇到一个问题，从A页面传到B页面的参数，正常跳转的话，B页面显示没有问题，在这个基础上刷新B页面，会出现空白，原因是传过来的参数丢失。查阅资料后，了解到有两种方法，第一种是截取url，第二种是使用sessionStorage。 使用sessionStorage时，A页面还是正常传递参数，B页面在接收参数时，要有所改变： let id; //先定义一个存储参数的变量 if(this.props.location.query &am
React-redux-dom刷新页面数据丢失问题
qq_44588612的博客
07-01 731
本文为解决页面刷新报401问题提供解决方法
✨React路由动态传参，页面刷新参数丢失 问题解决
在人生道路上谦让三分，就能天宽地阔。
10-13 2110
路由传参，刷新页面参数丢失问题 这里的history只需要将路由里面history参数 传入就可以了，采用的 sessionStorage 存储，达到页面刷新参数不丢失的一个问题。 // 解决路由传参 页面刷新丢失问题`在这里插入代码片` export const RouteStateD = (history) => { let urlData; if (history.location.state) { urlData = history.location.state; se
React-router之路由跳转导致store中的数据重置
麦子
03-03 2013
一、遇到问题的原因： 项目中React-router都是一级路由，当路由跳转的时候那个组件会被卸载掉，当返回那个组件的时候组件是重新构建的，componentdidmount会重置store中的数据，但是又不能用嵌套路由，嵌套路由会把路由到的所有组件都渲染出来。如果把加载store的函数放到父级组件的时候，当在本页面刷新浏览器的时候会找不到数据而报错。 二、解决办法： ...
React Router（二）
lqiqil的博客
04-07 123
。
手挽手带你学React之React-router4.x的使用
11-30
在实际开发中，React Router 4.x还支持动态路由（dynamic routing），允许在URL中使用占位符（如`:id`），这样可以根据不同的参数值加载不同的数据。此外，它还提供了一些高级特性，如` Prompt`（防止未保存的数据...
React 第四十三节 Router中 useBlocker 的使用详解及案例注意事项
最新发布
刺客-Andy 的博客
05-20 1193
useBlocker 是 React Router 中的一个实验性钩子，用于在特定条件下（如表单未保存时）拦截用户的导航行为（如路由跳转、浏览器后退/前进按钮）。它允许开发者自定义拦截逻辑，例如显示确认对话框，并支持异步操作（如保存数据）后再放行导航。
react hooks 路由传参
08-26
但是缺点是参数值只在页面刷新后会丢失。 4. 使用React Router提供的hooks进行路由传参：React Router还提供了一些hooks，如useParams、useLocation和useMatch等，可以方便地获取路由参数。useParams用于获取params...
React路由
weixin_44374938的博客
07-13 596
React路由： 一、前端路由的工作原理： 其实是利用前端中的BOM对象中的history这个属性来进行的实现。 二、实现前端路由的两种方法： 方法一：直接使用H5推出的history身上API。但是有些旧的浏览器可能不支持。这里使用的BrowserRouter 方法二：hash值(锚点)。兼容性好，会在url地址中出现#字符。使用的是HashRouter。URL的哈希值，#后面的内容不会发送给服务器，但是浏览记录会保存在历史记录中。 BrowserRouter与HashRouter的区别： 除了上面提到的
关于react路由传参跳转后刷新页面参数消失
热门推荐
百岁如流富贵冷灰的博客
12-18 2万+
在antd项目的开发中使用的路由是react-Router的路由，在使用是经常出现刷新当前页面后参数消失导致显示错误的问题： 解决办法： 1.最开始我的解决办法是将参数放在search参数先，然后通过截取地址栏来获取。(不推荐) &lt;Link to={{pathname:'url',search:'参数1',query:{'参数2'}}}&gt;&lt;/Link&gt; // 接收页...
十二、【React-Router5】BrowserRouter 和 HashRouter
天行健，君子以自强不息
11-30 236
十二、【React-Router5】BrowserRouter 和 HashRouter
随时记|React-Router中的HashRouter和BrowserRouter
weixin_49179577的博客
02-24 2305
什么是react-router 前端路由实现方式 路由需要实现三个功能： 当浏览器地址变化时，切换页面； 点击浏览器后退，前进按钮，网页内容发生变化； 刷新浏览器，页面加载内容对应当前路由对应的地址； 在单页面web网页中，单纯的浏览器地址改变，网页不会重载，如单纯的hash值改变，网页是不会变化的，因此我们的路由需要监听事件，并利用js实现动态改变网页。 hash 模式：监听浏览器地址hash值变化，并执行相应的js切换。 history 模式：利用H5 history API实现url地址改
「都是url惹的祸」（问题：小数点参数被截取｜刷新页面找不到资源）
weixin_53512283的博客
08-18 788
「都是url惹的祸」（问题：小数点参数被截取｜刷新页面找不到资源）
react 路由跳转刷新页面参数消失
Haines
05-15 2837
this.props.history.push({ pathname: furl, search: 'ssr2' }) 获取 const data = this.props.location.search //地址栏截取 console.log(data) const param = data.split('?')[1] console.log(param)
react 中刷新，路由传参数丢失不存在了？
weixin_30300523的博客
07-25 2675
你可能在Link to没写state {{pathname:'/report',state:{storageClear:this.state.storageClear}}} 转载于:https://www.cnblogs.com/panax/p/9367605.html
vue跳转传参刷新后参数消失
weixin_33826609的博客
02-26 490
一开始需要实现的功能是跳转到一个页面然后传入一个产品ID号，然后在目标页面用这个ID号显示具体的产品信息我是用的方法是在template中使用router-link标签 &lt;router-link to="/product"&gt; &lt;a @click="routerTo(productId)" href="#"&gt;...
React路由传参刷新参数不丢失
九段刀客的博客
06-10 5798
路由跳转 1、params方式 刷新不丢失的方式 this.props.history.push({pathname:`/Apply/${id}`}) 获取参数 this.props.match.params.id 路由文件中的配置 <Route path="/Apply/:id/:orderId?" component={Apply} /> 2、state模式 this.props.history.push({ pathname: `/ConfirmInfo`, state:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值