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

最新推荐文章于 2024-05-22 16:29:17 发布

Tessa_zzl

最新推荐文章于 2024-05-22 16:29:17 发布

阅读量1.6k

点赞数

文章标签： react 前端

本文链接：https://blog.csdn.net/Tessa_zzl/article/details/108732139

版权

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

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

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

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

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

解决方案: 在传递参数时, 对参数用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]) + '&';