关于react路由传参跳转后刷新页面参数消失

本文探讨了在Antd项目中使用React-Router遇到的参数丢失问题及解决方案,介绍了通过state和sessionStorage存储参数的方法,确保页面刷新后参数依旧可用。

在antd项目的开发中使用的路由是react-Router的路由,在使用是经常出现刷新当前页面后参数消失导致显示错误的问题:

解决办法:

1.最开始我的解决办法是将参数放在search参数先,然后通过截取地址栏来获取。(不推荐)

<Link to={{pathname:'url',search:'参数1',query:{'参数2'}}}></Link>
// 接收页面
const data=this.props.location.search
const param=data.param.substr(1,data.param.length);//地址栏截取

但是这样的方法其实是不推荐的,首先seach参数传递已经是react-Router不推荐的用法了,其次如果用户将你的地址栏参数删了刷新页面,那也许是个灾难

2.通过state传递,然后配合sessionStorage存储在浏览器中,页面销毁后,数据删除

const {dispatch,location}=this.props;

let recvParam;

if(location.state&&location.state.params){//判断当前有参数
    recvParam=location.state.params;
    sessionStorage.setItem('data',recvParam);// 存入到sessionStorage中
}else{
    recvParam=sessionStorage.getItem('data');// 当state没有参数时,取sessionStorage中的参数
}
this.setState({
    recvParam
})

关于sessionStorage的用去以及为何不用localStorage各位可自行百度比较一下

码字不易,如果对各位有帮助的话,希望点赞收藏,欢迎各位大手评论

<think>好的,用户想了解在React路由中如何传递state参数。我之前处理过React路由的相关问题,记得引用中的资料提到了路径参数和查询参数的用法,比如使用useParams或者URLSearchParams。不过用户这次问的是state参数,这和之前提到的两种方式可能有所不同。 首先,我需要回忆React Router的文档。在React Router中,除了路径参数(如/user/:id)和查询参数(?id=1&name=Suk),还有一种是通过state传递参数。这种方式不会将参数暴露在URL中,而是通过路由的状态对象来传递。 根据引用[3]中的示例,用户之前可能看过路径参数和查询参数的例子,但现在需要的是state参数。因此,我应该提供一个使用state的示例。比如,在跳转时,使用Link组件的to属性中的state对象,或者在编程式导航中使用history.push时传递state。 接下来,需要确认如何在接收组件中获取这些state参数。根据React Router的版本,可能使用useLocation钩子来获取location对象中的state属性。例如,在函数组件中,可以通过const location = useLocation();然后访问location.state来获取传递的参数。 同时,需要注意在类组件中如何使用,但用户可能更倾向于函数组件和钩子的写法,所以示例应优先展示函数组件的用法。另外,要确保示例代码正确,比如导入正确的钩子,如useNavigate和useLocation。 还要考虑可能的问题,比如当用户直接访问接收页面时,state可能为空,因此需要处理这种情况,给出错误提示或默认值。 最后,生成相关问题,帮助用户进一步理解,比如state参数与URL参数的区别,如何刷新后保持state参数,以及如何结合其他传参方式使用。这样用户可以根据自己的需求选择合适的方法。</think>在React路由中传递state参数可以通过以下步骤实现,这种方法不会将参数暴露在URL中: ### 一、传递state参数的方法 1. **使用`Link`组件传递**(声明式导航): ```jsx import { Link } from 'react-router-dom'; <Link to="/target-path" state={{ id: 123, name: 'example', data: { key: 'value' } }} > 跳转到目标页 </Link> ``` 2. **使用编程式导航传递**: ```jsx import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); navigate('/target-path', { state: { id: 456, details: { foo: 'bar' } } }); ``` ### 二、接收state参数 在目标组件中使用`useLocation`获取: ```jsx import { useLocation } from 'react-router-dom'; const location = useLocation(); const receivedState = location.state || {}; // 使用参数 console.log(receivedState.id); // 输出123或456 ``` ### 三、完整示例 发送组件: ```jsx import React from 'react'; import { useNavigate, Link } from 'react-router-dom'; function Sender() { const navigate = useNavigate(); return ( <div> {/* 声明式导航 */} <Link to="/receiver" state={{ message: '来自Link的state' }} > 通过Link传递 </Link> {/* 编程式导航 */} <button onClick={() => navigate('/receiver', { state: { message: '来自navigate的state' } }) }> 通过navigate传递 </button> </div> ); } ``` 接收组件: ```jsx import React, { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; function Receiver() { const location = useLocation(); useEffect(() => { if (!location.state) { alert('请通过正常导航访问本页'); window.location.href = '/'; } }, []); return ( <div> <h1>接收到的state参数:</h1> <pre>{JSON.stringify(location.state, null, 2)}</pre> </div> ); } ``` ### 四、注意事项 1. **刷新保留**:state参数页面刷新后会丢失,如需持久化需结合`localStorage`[^3] 2. **类型安全**:建议使用TypeScript定义state类型 3. **空值处理**:添加防御性代码处理直接访问的情况 4. **数据量限制**:适合传递少量敏感数据(如临时令牌)
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值