React 跳转路由传参, 页面请求两次

最新推荐文章于 2024-08-06 09:54:28 发布

Tessa_zzl

最新推荐文章于 2024-08-06 09:54:28 发布

阅读量1.7k

点赞数

文章标签： react 前端

本文链接：https://blog.youkuaiyun.com/Tessa_zzl/article/details/108732139

版权

当React路由跳转并携带包含中文的参数时，页面可能会因浏览器对中文参数的转码而加载两次，从而发出两次相同的网络请求。解决此问题的方法是对传入的参数使用encodeURI进行编码，在接收端使用decodeURI解码，以确保正确解析并避免重复请求。

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

问题: 路由跳转时, 页面发出了两次一模一样的网络请求, 但是当前页刷新时, 仅发出一次请求.

问题条件说明: 在跳转路由上带参数, 且参数中包含中文

问题分析: 浏览器对中文参数进行转码导致组件加载两次

解决方案: 在传递参数时, 对参数用encodeURI进行转码, 接收参数时用decodeURI解码

// 获取props.location.search中的参数值
const getQuery = (search) => {
  let obj = {};
  if (search) {
    let params = search.split('?')[1].split('&');
    for (let i = 0; i < params.length; i++) {
      let param = params[i].split('=');
      obj[param[0]] = decodeURI(param[1]);
    }
  }
  return obj;
};
// 把参数对象转换为search字符串
const getSearch = (obj) => {
  let str = '';
  if (obj && typeof obj === 'object') {
    str = '?';
    for (let i in obj) {
      if (obj[i]) {
        str = str + i + '=' + encodeURI(obj[i]) + '&';
      }
    }
    str = str.substring(0, str.length - 1);
  }
  return str;
}

// 传参跳转
let storageData = { type: 'business', typeName: '帖子', typeId: '123123' };
history.push('/DC/logDetail/infoResource' + getSearch(storageData));

// 跳转到页解析参数(hook)
let data = getQuery(props.location.search);
let { type, typeName, typeId } = data;